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

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

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

動的ルートでページを静的に生成する方法

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

• 各投稿のパスを/posts/<id>としたいと考えています。ここで、<id>は最上位のpostsディレクトリの下にあるMarkdownファイルの名前です。
• 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() {
  // Return a list of possible value for id
}

最後に、再びgetStaticPropsを実装する必要があります。今回は、指定されたidを持つブログ投稿に必要なデータをフェッチするためです。getStaticPropsにはparamsが与えられ、それにはidが含まれています（ファイル名が[id].jsであるため）。

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // Return a list of possible value for id
}
 
export async function getStaticProps({ params }) {
  // Fetch necessary data for the blog post using params.id
}

ここまで説明した内容を図でまとめました

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