[microCMS] Next.jsとmicroCMSでブログを作ってみた

はじめに

Headless CMSの「microCMS」のデータをNext.jsから取得してみたので、その事を書こうと思います。

環境について

開発環境は以下の通りです。

• OS: Windows11 (WSL2)
  • ディストリビューション: Ubuntu 22.04.5 LTS
    • Node.js: 20.19.3
• インストールしたパッケージ
  • NextJs: 15.3.5
  • microcms-js-sdk: 3.2.0
• microCMS: 無料プラン

microCMSの準備

まずはmicroCMS側の準備をします。

アカウントを作成してください。

サービスを作成するときに、一から作成する を選択しましたが、テンプレートから選ぶとUIも付いてくるので、そちらでよかったかもしれないです。

コンテンツ(API)を作成するときに ブログ を選択しました。

そうすると以下のようなコンテンツが作成されます。

• API名: ブログ
• エンドポイント: blogs
• APIスキーマ:
  • タイトル (テキストフィールド)
  • 本文 (リッチエディタ)
  • アイキャッチ (画像)
  • カテゴリ（コンテンツ参照）

• API名: カテゴリ
• エンドポイント: categories
• APIスキーマ:
  • カテゴリ名 (テキストフィールド)

仮でデータ が入っているので助かります

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

ターミナルで以下のコマンドを実行して、Next.jsのプロジェクトを作成します。

npx create-next-app@latest my-microcms-blog

SDKの導入

microCMS公式が提供しているSDKをインストールします。

cd my-microcms-blog
npm install microcms-js-sdk

実装

クライアントの作成

libs フォルダを作成し、その中に client.ts を作成してSDKの初期化を行います。
APIキーなどは環境変数から読み込むようにします。

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 || '',
});

記事一覧の表示

app/page.tsx を編集して、microCMSからデータを取得して表示させます。
実際は、もう少し部品化して記載したほうが良いですが、一旦表示させることを優先しました。

app/page.tsx

import { client } from "@/libs/client";
import { Blog } from "@/types";

export default async function Home() {
  const blogs = await client.getList<Blog>({
    endpoint: 'blogs',
  });

  if (blogs.contents.length === 0) {
    return <Alert title="Not Found" message="記事が見つかりませんでした" />
  }

  return (
    <ul className="mt-4 divide-y divide-gray-200">
      {blogs.contents.map((blog) => (
      <li key={blog.id} className="mb-4">
        <h2 className="text-xl text-blue-600">{blog.title}</h2>
      </li>
      ))}
    </ul>
  );
}

動作確認

環境変数をセットするために .env.local ファイルを作成します。

.env.local

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

サーバーを起動します。

npm run dev

ブラウザで http://localhost:3000 にアクセスすると、入稿した記事のタイトルが表示されました。

まとめ

Next.jsとmicroCMSを組み合わせて、簡単な記事一覧を表示する手順を紹介しました。
SDKが用意されているので、かなり手軽に導入できたのと、ドキュメントも充実しているので、そちらを見たほうがいいかもしれないです