コンテンツにスキップ
アプリケーションの構築データフェッチングgetStaticPaths

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内に記述されたコードがクライアントサイドバンドルから削除されていることをこのツールで検証できます。

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

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

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

  • getStaticPaths は getStaticProps と一緒に使用しなければなりません
  • getStaticPaths を getServerSideProps と一緒に使用することはできません
  • getStaticProps も使用する 動的ルート から getStaticPaths をエクスポートできます
  • ページ以外のファイル (例: components フォルダ) から 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 }
}