【初心者向け】Next.jsとmicroCMSを使用したWebサイト構築の全体像｜セットアップからVercelデプロイまで解説

公開日: 2025.03.03

はじめに

この記事では、Next.jsとmicroCMSを使用してヘッドレスCMSベースのWebサイトを構築する方法を説明します。

今回の目標

Next.jsでWebサイトを構築
microCMSからコンテンツを取得して表示
Vercelでデプロイ

今回は最小限のコンテンツで全体の流れの把握に焦点を当てるため、Next.jsやmicroCMSやVercelの各機能の詳細までは触れません。

1. Next.jsプロジェクトの作成

まずはGithubなどで新規リポジトリを作成し、Next.js環境を作成します。
リポジトリを作ったらローカルでNext.jsをインストールします。

npx create-next-app@latest my-app --typescript

ドキュメントの手順に従えば導入できるはずです。
英語なので慣れるまでは「うっ」と思うかもしれませんが、各種翻訳サービスを使って読み進めていきましょう。
https://nextjs.org/docs/app/getting-started/installation

2. microCMSの準備

microCMSのアカウント作成

microCMSのアカウントを作成し、ログインしましょう。
https://microcms.io/
プランについての詳細は別の記事で紹介しているのでよければそちらもご覧ください。

公式からも分かりやすい解説記事が出ているので困ったらこちらも参考に。
https://blog.microcms.io/getting-started/

新しいサービスを作成

アカウントにログインしたら新しくサービスを作成します。
https://document.microcms.io/manual/create-service

今回はNext.jsでWebサイトを作成するため、「一から作成する」を選択します
ここで設定した「サービスID」は後ほど使用します

APIの作成（例：ブログ用のAPI）

次はコンテンツを投稿・配信するためのAPIを作成します。
https://document.microcms.io/manual/create-api

テンプレートを選ぶことも出来ますが、今回は最小限の作りにしたいので「自分で決める」を選択します
APIの型は利用されるケースの多い「リスト形式」を選択
APIスキーマの定義では作りたいページ内容に応じて設定します
- https://document.microcms.io/manual/create-api#h41f309242d
- 例えばブログのタイトルと本文に加えて目次の欄を追加したい場合は目次用のフィールドを追加する必要があります
- 今回はシンプルに「テキストフィールド」のみ作成します

APIキーの作成

Next.jsからmicroCMSのコンテンツを取得するためのAPIキーを作成します。
https://document.microcms.io/content-api/x-microcms-api-key

ここまで出来たらmicroCMSの準備は完了です。

3. microCMSとNext.jsの連携

Next.jsからmicroCMSの情報を取得します。

環境変数の設定

microCMSのAPIキーとサービスIDをNext.jsの環境変数として設定します。
ルート直下に.envファイルを作成して以下のように定義してください。
your以下の部分に先ほど作成したmicroCMSのAPIキーとサービスIDを入力してください。

MICROCMS_SERVICE_DOMAIN=your-service-domain
MICROCMS_API_KEY=your-api-key

microCMS SDKのインストール

APIからデータをフェッチする方法は色々ありますが、今回はmicroCMSから提供されているmicrocms-js-sdkを使用します。
これによってendpointの指定やクエリパラメータの設定が簡単に行えます。

npm install microcms-js-sdk

APIクライアントの実装

ドキュメントに従って、APIクライアントを作成します。
https://github.com/microcmsio/microcms-js-sdk?tab=readme-ov-file#create-client-object

今回はsrc/libs/client.tsというファイルを新規作成し、以下のように記載します。

import { createClient } from 'microcms-js-sdk';

export const client = createClient({
  serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: process.env.MICROCMS_API_KEY
});

データの取得と表示

先ほど作成したAPIクライアントを使用して、データを取得して表示します。
任意でクエリパラメータを指定することも可能です。
今回はapp/pages.tsxで実装しています。

export default async function NewPage() {
  const response = await client.get({
    endpoint: "news",
    queries: { limit: 10 }, // クエリパラメータを設定
  });
  
  return (
    <div>
      {response.contents.map((content) => (
        <div key={content.id}>
          <h2>{content.title}</h2>
          <p>{content.body}</p>
        </div>
      ))}
    </div>
  );
}