今回の記事ではNext.jsで静的ルーティングと動的ルーティングでそれぞれ下層ページを作成していきます。ヘッドレスCMSを使ったサイトでは、一般的な静的下層ページ以外にも、投稿記事の詳細ページなどURLに投稿記事のIDが入るような動的ルーティングでページを作成する場面が出てきます。それぞれの違いとあわせてページの作成方法をみていきます。   （過去の参考記事もどうぞ） Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃3：メタ情報設定・ファイル最適化・ステート管理 Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃2：コーディング環境の構築 Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃1：インストール・導入    

1. 静的ルーティングでページ作成

App RouterでもPage Router同様にディレクトリベースのルーティングになります。App Routerでは「src/pages」ディレクトリではなく「src/app」ディレクトリになり、「page.tsx」というファイル名でページコンポーネントを作成する必要があります。ですので、appディレクトリ直下にルート名に合わせたディレクトリを用意し、そのディレクトリ配下にpage.tsxファイルを作成します。

touch src/app/foo/page.tsx

  作成したディレクトリに対応するルーティングが自動的に生成され、page.tsxファイルがそのルーティングのページコンポーネントファイルとなります。layout.tsxファイルを継承する形になるので、layout.tsxファイルで読み込んでいる共通パーツはそのまま使えます。また、ページ固有のメタデータを更新するには、page.tsxでMetadataAPIを使い「metadata」の変数名でexportすることで上書きすることができます。 【/src/app/foo/page.tsx】

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: `ページタイトル | ${process.env.SITENAME}`,
  description: '...ページの説明文...'
}

export default function FooPage() {
  return (
    <main>
      .....
    </main>
  )
}

  実際に、https:localhost/foo とURLにアクセスすることでページが表示されることを確認できます。これで静的ルーティングの下層ページを作成することができました。    

2. 動的ルーティングでページ作成

動的ルーティングも静的ルーティング同様にディレクトリベースでルーティングを決めていきますが、静的ルーティングとはことなり、ディレクトリ名が変数となるように角カッコでパラメーターが入るようにしておきます。今回はブログ記事の投稿IDが入る想定で作成していきます。

mkdir src/app/posts/[id]
touch src/app/posts/[id]/page.tsx

  下記のようなディレクトリ・ファイル構成になります。

┣ /src
  ┣ /app
    ┣ layout.tsx
    ┣ page.tsx
    ┣ ......
    ┣ posts
      ┣ page.tsx // 一覧ページ ※静的ルーティング（/posts）
      ┣ [id]
        ┗ page.tsx // 詳細ページ ※動的ルーティング（/posts/POST_ID）

  動的ルーティングとなるページコンポーネント側で、「generateStaticParams()」メソッドを使って動的ルーティングのパラメータがセットされたパスを生成し、あわせてAPIで取得したコンテンツデータを読み込んでパラメーターに使う投稿IDを紐づけていきます。 【/src/app/posts/[id]/page.tsx】

export async function generateStaticParams() {
  const posts = await fetch('https://exapmle.com/api/****').then((response) => response.json());
  return posts.data.map((post) => ({ id: String(post.id) }));
}

export default async function PostsDetailPage({ params }: { params: { id: string } }) {
  const currentPost = await fetch('https://exapmle.com/api/****').then((response) => response.json()).filter((post) => post.id === Number(params.id));
  console.log(currentPost)

  return (
    <main>
      .....
    </main>
  )
}

  投稿記事本文などの情報もコンテンツ内で展開できるようにfetchメソッドで取得していきます。また、動的ルーティングのページでメタデータを設定する場合には、MetadataAPIを使うのではなく「generateMetadata()」メソッドでexportすることにより動的にメタデータを設定していきます。 【/src/app/posts/[id]/page.tsx】

import type { Metadata } from 'next';

export async function generateStaticParams() {
  const posts = await fetch('https://exapmle.com/api/****').then((response) => response.json());
  return posts.data.map((post) => ({ id: String(post.id) }));
}

export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  const currentPost = await fetch('https://exapmle.com/api/****').then((response) => response.json()).filter((post) => post.id === Number(params.id));
  return {
    title: currentPost.title,
    description: currentPost.content.slice(0, 120),
    .....
  }
})

export default async function PostsDetailPage({ params }: { params: { id: string } }) {
  const currentPost = await fetch('https://exapmle.com/api/****').then((response) => response.json()).filter((post) => post.id === Number(params.id));
  console.log(currentPost)

  return (
    <main>
      .....
    </main>
  )
}

  このように静的ルーティングと動的ルーティングではページの作成やルーティングの設定方法にすこし違いがありますが、基本的にはディレクトリベースで設定されることになるのでとてもわかりやすいですね。  

---

  今回はNext.jsでヘッドレスCMSを使ったサイトで、静的・動的ルーティングでそれぞれ下層ページを作成してきました。動的ルーティングはブログやメディアサイト以外にもウェブアプリなどでも採用されるので覚えておきたいですね。