Next.jsで静的にネストしたルーティングのページを生成する

• やりたいこと
  • /blog/[$category]/[$index]みたいなページをビルド時に生成したい
• やったこと
  • /blog/category/[...id].jsのgetStaticPathsでparamsのidにパスのリストを入れる
• つまずいたこと
  • /blog/category/[id].jsではネストしたパスのページは生成できない
• 気になること
  • getStaticPathsとgetStaticPropsで二回ポスト一覧を取得している
  • 関数の外で書けばいいだけ？今気づいたのであとでためす

// pages/blog/category/[...id].js

export function getStaticPaths() {
  // {CategoryName: [Post]}
  let categorizedPosts = getCategorizedPosts()
  
  // type Paths = [{params: {id: [path]}]
  // ファイル名が[...id].jsであればidがキーになる
  let paths = []

  for (let category in categorizedPosts) {
    // カテゴリーの記事全部を10記事ごとにわけてページを作りたい
    const pageSliceLength = Math.ceil(categorizedPosts[category].length / 10);

    for (let index = 0; index < pageSliceLength; index++) {
      // [$category, $index] 
      const id = [category.toString(),index.toString()]

      paths.push({params: {id}})
    }
  }

  return {paths, fallback: false}
}

export function getStaticProps({params}) {
  const [category, index] = params.id

  const ps = getCategorizedPosts()
  const posts = ps[category].slice(index * 10, index * 10 + 10)

  return {
    props: { posts, category, index }
  }
}