Bercriber's Blog

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

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

export function getStaticPaths() {
  let ps = getPostList().map(p => getPost(p))

  let categoryList = [Category]
  let categorizedPosts = {CategoryName: [Post]}
  
  // カテゴリーの記事全部を10記事ごとにわけてページを作りたい
  let pageSliceLength = Math.ceil(categorizedPost.length / 10);

  // type Paths = [{params: {id: [path]}]
  // ファイル名が[...id].jsであればidがキーになる
  let paths = []
  for (let category in categorizedPost) {
    for (let index = 0; index < pageSliceLength; index++) {
      // /blog/[$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 = getPostList().map(p => getPost(p)).filter(p => p.category == category)
  const posts = ps.slice(index * 10, index * 10 + 10)

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