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

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

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

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

この例では、ブログ記事の 動的ルートを作成したいと考えています。

• 各投稿には、トップレベルの posts ディレクトリの下にある markdown ファイルの名前である /posts/<id> というパスを持たせたいと考えています。
• 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 という名前の async 関数をエクスポートします。この関数では、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 には、ファイル名が [id].js であるため id を含む params が渡されます。

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
}

ここで説明した内容のグラフィック概要です。

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