getStaticPaths

ページがDynamic Routesを持ち、getStaticPropsを使用する場合、
静的に生成されるpathsのリストを定義する必要がある。

dynamic routes を使用するページから getStaticPaths （静的サイト生成）という関数をエクスポートすると、
Next.jsは getStaticPaths で指定されたすべての経路を静的にプリレンダリングする。

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
}

あおけん

 When should I use getStaticPaths?dynamic routes を使うページを静的にプリレンダリングする場合は、getStaticPathsを使うべき。
データはヘッドレスCMSから
データはデータベースから
データはファイルシステムから
データは公開キャッシュ可能（ユーザー固有ではない）
getStaticProps はHTMLファイルとJSONファイルを生成し、どちらもパフォーマンスのためにCDNでキャッシュすることができる

あおけん

 When does getStaticPaths rungetStaticPaths は本番環境ではビルド時にのみ実行され、実行時に呼び出されることはない。

getStaticPathsの内部で書かれたコードが、

クライアント側のバンドルから削除されていることを、このツールで確認できる。

 How does getStaticProps run with regards to getStaticPathsビルド中に返されたすべてのpathsに対して、next build時に実行
fallback:trueを使用している場合、バックグラウンドで実行
fallback: blockingを使用している場合、最初のレンダリングの前に呼び出される

あおけん

Where can I use getStaticPaths

getStaticPropsと一緒に使用
getServerSideProps と一緒に使用することはできない
getStaticPropsも使用する dynamic route からgetStaticPathsをエクスポートできる
ページ以外のファイルからエクスポートすることはできない
ページコンポーネントのプロパティではなく、スタンドアロン関数としてエクスポートする

あおけん

Runs on every request in development

開発中（次の開発）では、リクエストごとにgetStaticPathsが呼び出されます。

あおけん

Generating paths on-demand

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 }
}