Next.jsのgetStaticPropsとgetStaticPathsについての覚書

目次

• getStaticProps
• getStaticPaths

自分用のメモ 解像度がまだ相当低いと思う

getStaticProps

getStaticPropsはビルド時に静的なファイルを作るのに使用する Reactコンポーネントのpropsを事前に用意しておく感じ

getStaticPaths

例えばAPIから

[
  {
    id: "test1"
  },
  {
    id: "test2"
  },
  {
    id: "test3"
  },
]

のようなデータを取得するとする

そしてこのidをベースに下記のようなルーティングを実装したい

- localhost:3000/test/test1
- localhost:3000/test/test2
- localhost:3000/test/test3

それにはまずsrc/pages/test/[id].tsxを作成

そして、アクセスよりも前に静的にファイルを生成するためにはビルド段階でidを全て取得しておく必要がある

そこで必要になるのがgetStaticPaths()

export const getStaticPaths = async() => {
  const res = await fetch("APIのURL")
  const json = await res.json()

  const paths = json.map(j => j.id)

  return {
    paths,
    fallback: true,
  }
}

上記のようにAPIから情報取得 => pathsという配列にしてreturn

これだけで上で見たような動的ルーティングを実装可能

さらに、fallbackにはfalse, true, "blocking"が指定可能

falseにすればビルド時にAPIで取得できていないIDについては404に飛ばし、trueにすれば新しくAPIを叩き、動的に生成し、その後は静的なファイルとして出力することも可能

当ブログはGatsbyを使用していて、静的ならGatsby、動的ならNextかという1〜2年前くらいとは全く状況が異なっていて驚いた

また、圧倒的にNextの方が開発もしやすい印象