🐥

React + Next.js - getStaticPathsの使い方

2022/09/06に公開

JavaScript

React + Next.jsで開発をする時にSSGの利用は避けれない。今回は事前にfetchしてpropsに値を渡すためのgetStaticPropsと、動的なルーティングに対応するためのgetStaticPathsについて書き記す。

動的にgetStaticPathsのPathを設定する

Next.js - get-static-paths
SSGモードで事前にレンダリングを終えるページの場合に、ルーティング先も事前にルーティングを終わらせておける
引数には事前にレンダリングするpathsと事前登録されていないページをレンダリングする際の挙動を定義するfallbackが必要

[id].tsx


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

動的にgetStaticPathsのPathを設定する

Discussion