Next.js(App Router)とmicroCMSでブログを作ろう!! ～一覧・詳細ページ編～

最近流行り(??)のJamstackブログを最新のNext.js(今回は14.0.2)とmicroCMSで作ってみよう。 ※Next.jsのプロジェクトの作り方は以前の記事を参照してください

microCMSのAPIを作成
ブログ記事データ取得用のクライアントを作成
一覧ページの作成
詳細ページの作成
開発モードで起動してページを確認

microCMSのAPIを作成

まず、何はともあれmicroCMSのAPIを作成するところから始める。今回はmicroCMSが最初から準備してくれているブログ用のテンプレートを使うことにする。※画像参照

APIを作ったら忘れずにmicroCMSのSDKをインストールすること。インストールは以下のコマンドを打つだけ。

npm install microcms-js-sdk

ブログ記事データ取得用のクライアントを作成

プロジェクト内に「/lib/microcms.js」ファイルを作成し、以下の様に記述。

※ここではサービスドメインとAPIキーをベタ書きしているが、セキュリティ上、実運用時には必ず外部ファイルで管理すること!!

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

// クライアントを作成
export const client = createClient({
  serviceDomain: '{microcmsのURL「https://xxxxxxxx.microcms.io/」のxxxxxxxxの部分}',
  apiKey: '{APIのサービス設定→APIキーで取得可能}',
});

// ブログ一覧を取得
export const getList = async (queries) => {
  const listData = await client.getList({
    endpoint: "blogs",
    queries,
  });

  // データの取得が目視しやすいよう明示的に遅延効果を追加
  await new Promise((resolve) => setTimeout(resolve, 3000));

  return listData;
};

// ブログの詳細を取得
export const getDetail = async (contentId, queries) => {
  const detailData = await client.getListDetail({
    endpoint: "blogs",
    contentId,
    queries,
  });

  // データの取得が目視しやすいよう明示的に遅延効果を追加
  await new Promise((resolve) => setTimeout(resolve, 3000));

  return detailData;
}

一覧ページの作成

プロジェクト作成時から存在する/app/page.jsを以下のように書き換える

import Link from "next/link";
import { getList } from "../lib/microcms";

export default async function StaticPage() {
  const { contents } = await getList();

  if (!contents || contents.length === 0) {
    return <h1>No contents</h1>;
  }

  return (
    <div>
      <ul>
        {contents.map((post) => {
          return (
            <li key={post.id}>
              <Link href={`/blog/${post.id}`}>{post.title}</Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

詳細ページの作成

本文を正しく表示するために、以下のコマンドでhtml-react-parserをインストールする。

npm install html-react-parser

/app/blog/[id]/page.jsを作成し、以下のように記述する

import { notFound } from "next/navigation";
import parse from "html-react-parser";
import { getDetail, getList } from "../../../lib/microcms";

export async function generateStaticParams() {
  const { contents } = await getList();

  const paths = contents.map((post) => {
    return {
      id: post.id,
    };
  });

  return [...paths];
}

export default async function StaticDetailPage({
  params: { id },
}) {
  const post = await getDetail(id);

  if (!post) {
    notFound();
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <div>{parse(post.content)}</div>
    </div>
  );
}

開発モードで起動してページを確認

言われなくてもみんな知ってる起動コマンドを打つ

npm run dev

まずは http://localhost:3000/ にアクセス。サンプル記事のタイトルが表示されていたらOK。

問題なければ表示されてるタイトルをクリックしてみる。サンプル記事の詳細ページが表示されたらOK。

とりあえず、今回は一覧ページと詳細ページという最低限の機能のみ作ってみた。余裕ができれば検索機能とかカテゴリ機能の作り方記事も書くかも...