国産ヘッドレスCMSとして注目されているmicroCMSとNext.jsを使用したWebサイトのモダンな制作方法を学べる解説書 -モダンWebサイト制作入門
※本ページは、アフィリエイト広告を利用しています。 国産ヘッドレスCMSとして注目されている「microCMS」とJavaScriptフレームワーク「Next.js」を使ったモダンWebサイトの制作について初心者でも分かりやすく解説した入門書を紹介します。 当ブログはWordPressですが、ここ数年ヘッドレスCMSに注目が集まってきています。ヘッドレスCMSって何？という人からNext.jsは使ったことがないという人でも本書でしっかりと学ぶことができます。 著者陣は非常に豪華で、microCMSの開発陣です。開発者と聞くと開発側の目線なのでは？と心配になるかもしれませんが、実装者目線のステップバイステップで架空のコーポーレートサイトを実装しながらmicroCMSとNext.jsを用いたWebサイトのモダンな制作方法を学べます。 WordPressは使ったことがあるけどヘッドレスCMSは初
Next.js と TypeScript で、microCMS を導入する流れ - コムテブログ
microCMS の基本 microCMS とは、ヘッドレス CMS（Content Management System）の一つです。ヘッドレス CMS とは、フロントエンドとバックエンドが完全に分離された CMS のことを指します。これにより、データの入力と表示が分離され、任意のフロントエンドでデータを表示することができます。 microCMS は API によるデータの取得が可能で、これにより JavaScript のフレームワークである Next.js からデータを取得し、ウェブサイト上に表示することが可能となります。 microCMS でブログを作成する microCMS の管理画面に入ります。 管理画面の左 > コンテンツ（API）の「＋」をクリック > 「カテゴリ API」を作成 API 名 > 「ブログ」、エンドポイント名を「blog」と指定 API スキーマ > フィールド
microCMSの活用テクニック: 実務で使える5つの機能
microCMSはAPIベースの日本製ヘッドレスCMSです。コンテンツをAPIベースで利用できるので、好きな言語・フレームワークと組み合わせて利用できます。 いろいろな言語・フレームワークでmicroCMSを始めるチュートリアル記事はインターネットに多くありますが、それを終えたあとに読む記事はあまり見かけません。このZennではチュートリアルを終えた方向けに、実際の運用で役立つ機能を紹介していきます。 microCMSの便利な機能 柔軟なクエリパラメータ microCMSはAPIを柔軟に構成できますが、クエリパラメータも充実しています。 例えば以下のURLはクエリパラメータを使って 「titleフィールドに"おすすめ"を含むもの」 をフィルタし、その結果を 「公開日時の新しい順」に並び替えて 取得しています。 https://your-domain.microcms.io/api/v1/b
microCMSとNext.jsを用いて、自分の記事まとめてみた
概要 以下動画のように私のポートフォリオで、Zennで私がどのような記事を投稿しているかを表示し、タグで絞り込みができるようにしています。クリックすればZennの対象記事のページに遷移することができます。興味のある人は実際のサイトで見てみてください（ポートフォリオ ブログページ）。 最新の記事の情報を反映させるために、記事をZennで投稿した後に、microCMSで記事のタイトルやリンク等を含んだコンテンツを1つ作成して公開するといった一手間は必要になってきますが、労力的には最小限に抑えられていると思います！ 今回の機能を作るに至った経緯 Zennは非常に使いやすいと思いながら利用させていただいているのですが、個人の記事を検索で絞るといったことができないので、個人のページで記事の数が増えてきたときに、この人がどのような内容の記事を書いているかがわかりづらくなってしまうと思いました。自分がど
microCMSを導入してみた
私が通っている学校の課題でmicroCMSを利用して飲食店サイトを1ページ作成する課題が出た為、 課題を作成しつつ紹介していきたいと思います。 成果物 私が個人的に大好きなパンケーキ屋さんをゴールとして作成しました。 利用した部分
microCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【前編】
はじめにmicroCMSの大西です。microCMSには2022年の5月に入社しました。普段は開発本部長として組織的な業務、エンジニアのサポート、開発全体の大まかなタスクの方向性を決めといった業務を行なっています。 microCMSでは昨年中盤以降にWebフロントエンドの設計パターンを刷新しました。採用した設計パターンはクリーンアーキテクチャです。 2回に分けて大西と森茂（フロントエンドテックリード）がmicroCMSのWebフロントエンドの設計パターンについて紹介します。 前提としてmicroCMSのフロントエンドはReact、状態管理にはuseState/useContextを使用しています。APIのキャッシュにReact Query（TanStack Query）を使用しています。比較的素朴な設計になっています。 背景と課題microCMSはサービス開始から数年が経過しており、バック
Next.jsとmicroCMSを用いたプレビューページ作成
JSフレームワークでWeb制作をする際に問題となるのがプレビュー環境です。 他のCMSなどと異なり一から自前で実装することになります。 この複雑さ解消を目的に、本記事ではNext.jsとmicroCMSを組み合わせたプレビュー環境の実装例を紹介します。 対象 Next.jsで簡単な開発・デプロイ経験がある方 microCMSに少しでも触ったことがある方 全体像と流れ 前提として、「JSフレームワークを用いたWebサイト制作におけるプレビューページ」はCSRなアプリケーションを作成する感覚と似ていると捉えましょう。 該当ページにアクセスする fetchが飛ぶ 情報が埋め込まれる 表示される といった流れです。（そもそもCSRなどレンダリング手法が曖昧な方はコチラやコチラを参照ください） SSGであれば別途CSRのページを用意して、SSRであればそのままSSRかCSRのページを用意することとな
Next.js+microCMS+Vercel面白い - ゆーすけべー日記
Next.js と microCMS と Vercel が面白い。それぞれ面白いし、組み合わせるとさらに面白い。なにせ、メディアサイトがデプロイも含めて 2 時間で出来る。 Next.js + microCMS + Vercel すごいな。メディアサイト（中身スッカスカだけど）がものの 2 時間でデプロイまでできた。 https://twitter.com/yusukebe/status/1435708770705760256 ということで、メディアサイトを作りながら、Next.js と microCMS と Vercel の面白さをまとめる。 2 時間で作るメディアサイト 例として「ラーメンまとめ！」というメディアサイトを作ってみる。このサイトには ラーメン屋 ラーメン屋のまとめ記事 の 2 つの種類のコンテンツがある。「ラーメン屋」が「名前」「場所」「ラーメン写真」というプロパティを持
microCMS + Next.jsでJamstackブログを作ってみよう
microCMSとNext.jsを組み合わせて、Jamstackなブログを作成することができるチュートリアルです。 前提利用サービス本記事では以下の2つのウェブサービスを利用します。どちらのサービスも個人開発においては無料の範囲で十分な機能を備えており、実績豊富なサービスです。最初にそれぞれのサイトトップより登録を済ませておきましょう。 microCMS：特に日本において市場をリードするヘッドレスCMSです。ブログのコンテンツ管理を担います。Vercel：フロントエンド開発向けのプラットフォームです。サイト公開におけるインフラやCI/CDを担います。 ソフトウェアバージョン下記のバージョンで開発を行なっています。バージョンの差異によって若干機能が異なる可能性があります。 Next 13.1.1react 18.2.0react-dom 18.2.0microcms-js-sdk 2.3.2
microCMS と Next.js でブログを作る（SDK 版） | DevelopersIO
以前、microCMS と Next.js でブログを作るというブログを書いたのですが、microCMS から公式の SDK が提供されていたので書き換えてみました。 前回と比べ、大きく異なる点は以下の 2 点になります。 microCMS JavaScript SDKを使うため、aspidaは未使用 Next.js のバージョンを 10 から 11 にアップデート ここではこれら変更点についてのみ扱います。それほど変わらない点については、前回の記事をご参照ください。microCMS の API はまったく同じものを使用しています。 完成したコードのリポジトリは下記になります。 https://github.com/hbsnow-sandbox/nextjs-micro-cms-sdk-example インストール まずは Next.js をインストールしましょう。TypeScript は
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた: 柴田和祈, 森茂洋, 野崎洋平, 千葉大輔: 本