ブログ作成の備忘録①：動的ページについて

今回はNext.jsとmicroCMSを使った動的ページ（この記事ページのこと）に関する備忘録です。

App Routerのルーティング

ページ構成を決めるために、Next.jsのApp Routerにおけるルーティング機能についてふんわり理解します。
しっかりと理解したいなら公式ドキュメントを見ることをお勧めします。

appディレクトリがルートディレクトリとなり、配下に各ページ用のディレクトリを作成する。
ディレクトリ名がただの英数字なら、ディレクトリ名がURLのセグメント（URLの/で区切られた文字列）部分を構成する。
()で囲まれたディレクトリ名は「ルートグループ」と呼ばれ、それ自体はセグメントを構成しない。主にグループ分けに使うことが多い。
[]で囲まれたディレクトリ名は動的ルート（Dynamic Routes）と呼ばれ、動的ルートのセグメントは任意の文字列を取る。
app/hoge/[fuga]というディレクトリ構造でドメインがexample.comなら、example.com/hoge/appleでもexample.com/hoge/kokeshiでも良い。
- 動的ルートの文字列はparamsというオブジェクトを通してコンポーネントに渡される。
- 例えばapp/hoge/[fuga]という構成でURLがexample.com/hoge/fooなら、[fuga]ディレクトリ内のpageファイルの引数paramsにfuga: "foo"というオブジェクトが渡される。
_が接頭辞のディレクトリはプライベートフォルダとなり、ルーティングの対象外となる。

他にも@が接頭辞のParallel Routesなどありますが、このブログでは使っていないので割愛します。

以上を踏まえ、動的ページのディレクトリ構造は以下としました。

app
 └ (article)
       └ [id]

microCMSから記事を取得する

microCMSのAPIを使って記事を取得する方法ですが、公式ブログで紹介されているコンテンツ取得用クライアントの作成のままです。
ブログの型定義のみ、自分のブログに合わせて項目を増やしたくらいです。

`generateStaticParams()`を設定する

このブログはSSGで静的サイトにするので、generateStaticParams()というビルド時に静的なルートを生成する関数を使用します。
この記事ページにおいては、「考えられるURLの全パターンを生成する」という認識で合っていると思います。

該当の処理は以下の形にしました。

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

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

  return paths;
};

microCMSの記事一覧を取得するAPIでは、contentsプロパティに記事の一覧データが入っていますので、これを取得します。
次に記事のIDをmap関数で抽出します。（const pathsのところ）
あとは抽出したIDの配列をreturnするだけです。
ちなみにgenerateStaticParams()はオブジェクトを含んだ配列を返り値とします。

長くなったので次回に続きます。