外部データに依存するページパス

前のレッスンでは、ページコンテンツが外部データに依存するケースについて説明しました。インデックスページをレンダリングするために必要なデータを取得するために getStaticProps を使用しました。

このレッスンでは、各ページパスが外部データに依存するケースについて説明します。Next.jsでは、外部データに依存するパスを持つページを静的に生成することができます。これにより、Next.jsで動的URLを実現できます。

動的ルートを使用した静的生成の方法

このケースでは、ブログ投稿用の動的ルートを作成したいと考えています:

• 各投稿に /posts/<id> というパスを持たせたい。ここで <id> はトップレベルの posts ディレクトリにあるマークダウンファイルの名前です。
• ssg-ssr.md と pre-rendering.md があるので、パスを /posts/ssg-ssr と /posts/pre-rendering にしたいと考えています。

手順の概要

以下の手順でこれを実現できます。今すぐこれらの変更を行う必要はありません — 次のページですべて行います。

まず、pages/posts の下に [id].js というページを作成します。[ で始まり ] で終わるページは、Next.jsの動的ルートです。

pages/posts/[id].js では、これまで作成してきた他のページと同様に、投稿ページをレンダリングするコードを記述します。

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}

ここで新しいのは、このページから getStaticPaths という非同期関数をエクスポートすることです。この関数では、id の取り得る値のリストを返す必要があります。

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // idの取り得る値のリストを返す
}

最後に、getStaticProps を再度実装する必要があります — 今回は、与えられた id を持つブログ投稿に必要なデータを取得するためです。getStaticProps には params が渡され、id が含まれます（ファイル名が [id].js だからです）。

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // idの取り得る値のリストを返す
}
 
export async function getStaticProps({ params }) {
  // params.idを使用してブログ投稿に必要なデータを取得
}

以下は、ここまで説明した内容のグラフィックサマリーです:

次のページで実際に試してみましょう！