getStaticPaths

ページがダイナミックルーティングを使用し、かつgetStaticPropsを使用している場合、静的に生成するパスのリストを定義する必要があります。

ダイナミックルートを使用するページからgetStaticPaths（静的サイト生成）という関数をエクスポートすると、Next.js はgetStaticPathsで指定されたすべてのパスを静的に事前レンダリングします。

pages/repo/[name].tsx

import type {
  InferGetStaticPropsType,
  GetStaticProps,
  GetStaticPaths,
} from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getStaticPaths = (async () => {
  return {
    paths: [
      {
        params: {
          name: 'next.js',
        },
      }, // See the "paths" section below
    ],
    fallback: true, // false or "blocking"
  }
}) satisfies GetStaticPaths
 
export const getStaticProps = (async (context) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}) satisfies GetStaticProps<{
  repo: Repo
}>
 
export default function Page({
  repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return repo.stargazers_count
}

getStaticPaths APIリファレンスは、getStaticPathsで使用できるすべてのパラメータとプロップスを網羅しています。

getStaticPaths を使用すべきなのはどのような場合ですか？

ダイナミックルートを使用するページを静的に事前レンダリングする場合、および以下の条件に当てはまる場合は、getStaticPathsを使用する必要があります。

データがヘッドレスCMSから来ている場合
データがデータベースから来ている場合
データがファイルシステムから来ている場合
データが公開キャッシュ可能である（ユーザー固有ではない）場合
ページが事前レンダリングされる必要がある（SEOのため）かつ非常に高速である必要がある場合 — getStaticPropsはHTMLとJSONファイルを生成し、どちらもCDNによってパフォーマンスのためにキャッシュできます

getStaticPaths はいつ実行されますか

getStaticPathsは本番環境でのビルド中にのみ実行され、ランタイム中には呼び出されません。getStaticPaths内に書かれたコードがクライアントサイドのバンドルから削除されることは、このツールで確認できます。

getStaticProps は getStaticPaths とどのように連携して実行されますか

getStaticPropsは、ビルド中に返されたすべてのpathsに対してnext build中に実行されます。
fallback: trueを使用している場合、getStaticPropsはバックグラウンドで実行されます。
fallback: blockingを使用している場合、getStaticPropsは初回レンダリング前に呼び出されます。

getStaticPaths はどこで使用できますか

getStaticPathsはgetStaticPropsと併用する必要があります。
getServerSidePropsとはgetStaticPathsを併用できません。
getStaticPropsを使用するダイナミックルートからgetStaticPathsをエクスポートできます。
getStaticPathsをページ以外のファイル（例：componentsフォルダ）からエクスポートすることはできません。
getStaticPathsは、ページコンポーネントのプロパティとしてではなく、単独の関数としてエクスポートする必要があります。

開発中、リクエストごとに実行されます

開発中（next dev）は、getStaticPathsはすべてのリクエストで呼び出されます。

オンデマンドでのパスの生成

getStaticPathsを使用すると、fallbackを使用して、オンデマンドではなくビルド中にどのページを生成するかを制御できます。ビルド中に多くのページを生成すると、ビルドが遅くなります。

pathsに空の配列を返すことで、すべてのページをオンデマンドで生成することを遅延できます。これは、Next.js アプリケーションを複数の環境にデプロイする場合に特に役立ちます。例えば、プレビューではすべてのページをオンデマンドで生成することで（本番ビルドでは行わず）、ビルドを高速化できます。これは、何百、何千もの静的ページを持つサイトに役立ちます。

pages/posts/[id].js

export async function getStaticPaths() {
  // When this is true (in preview environments) don't
  // prerender any static pages
  // (faster builds, but slower initial page load)
  if (process.env.SKIP_BUILD_STATIC_GENERATION) {
    return {
      paths: [],
      fallback: 'blocking',
    }
  }
 
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  // Get the paths we want to prerender based on posts
  // In production environments, prerender all pages
  // (slower builds, but faster initial page load)
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))
 
  // { fallback: false } means other routes should 404
  return { paths, fallback: false }
}