getStaticPathsの使い方：動的URLの生成対象を列挙する
getStaticPathsで生成するURLを決め、getStaticPropsで各ページの内容を取得する役割分担を学びます。fallbackの違いと静的出力の制約も整理します。
getStaticPathsで生成するURLを決め、getStaticPropsで各ページの内容を取得する役割分担を学びます。fallbackの違いと静的出力の制約も整理します。
対象環境と役割
Pages Routerで使う機能
Pages Routerでは pages ディレクトリを使います。App Routerの app へ同じファイルを移しても、データ取得やルーティングの規約は引き継がれません。この記事では役割を絞ったサンプルで、実行タイミングと受け渡す値を確認します。
引数・戻り値・受け渡すデータ
paths はURL文字列または { params: ... } の配列です。fallback は未列挙URLを扱う方式で、この例では false を返します。パラメーター名はフォルダー名と一致させます。
コード例を動かす
pages/books/[slug].tsx を作成する
以下はこのファイルとして配置する例です。既存ファイルへ追記する場合は、同じ名前のexportやURLが重複しないように統合してください。
import type { GetStaticPaths, GetStaticProps } from 'next';
const books: Record<string, string> = { 'web-basics': 'Web制作入門' };
export const getStaticPaths: GetStaticPaths = async () => ({
paths: Object.keys(books).map(slug => ({ params: { slug } })),
fallback: false,
});
export const getStaticProps: GetStaticProps<{ title: string }> = async ({ params }) => {
const slug = params?.slug;
if (typeof slug !== 'string' || !Object.hasOwn(books, slug)) return { notFound: true };
return { props: { title: books[slug] } };
};
export default function Book({ title }: { title: string }) {
return <main><h1>{title}</h1></main>;
}実行結果と処理の順序
/books/web-basics を生成対象にし、ページへタイトルを渡します。未知の /books/missing は fallback: false により対象外となります。
getStaticPaths が本文データを返すわけではありません。同じslugを使って getStaticProps が内容を解決します。CMSのIDと公開slugを分ける設計では、その対応表も必要です。
つまずきやすい点と使い分け
fallbackの選択
true は初回にフォールバック状態があり、ページ側で処理が必要です。blocking は初回の生成を待って返します。どちらもサーバー側生成が必要で、純粋な静的出力の選択肢ではありません。
文字列・配列を取り違えない
[slug] は文字列、[...slug] は文字列配列です。URLに含める文字、大文字小文字、重複するslugも確認してください。この例の Object.hasOwn はES2022対応の実行環境・型ライブラリを前提とします。
静的出力で使えるか
この例はビルド時に値を確定できるため静的出力に組み込めます。CMS更新などで値を変えた場合は再ビルド・再配置が必要です。
確認課題と実務への応用
自分で値を変えて確認する
2冊目のslugを追加し、両方のURLを直接開きます。配列側だけ更新して本文側を忘れた場合に、生成結果がどうなるかも確認してください。
開発サーバーだけでなく、本番用ビルドと公開先でも確認します。URLを直接開く場合と画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力の問題が見つかります。
公式資料と関連する記事
Googleの優先するニュース提供元にSEの部屋を追加
Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。
候補にSEの部屋が表示されない場合は、まだ追加できません。