SSGでNext.jsをローカル開発する時の、ページ生成処理を短くする

Next.js Advent Calendar 2020の4日目記事です。

Next.jsをSSGモードで利用している場合、ローカル開発時のページ再生成に時間がとられることが時々あります。

export const getStaticPaths = async () => {
  const posts = await getAllWPPost()
  return {
      paths: posts.map(post => ({
          params: {
              id: post.id,
              slug: decodeURI(post.slug)
          }
      })),
      fallback: false
  }
}

こういう時は、ローカル開発の時だけFallbackモードを有効にしましょう。

const isProd = process.env.NODE_ENV === 'production'

export const getStaticPaths = async () => {
    const posts = await isProd ? getAllWPPost(): getWPPost({ limit: 10 })
    return {
        paths: posts.map(post => ({
            params: {
                id: post.id,
                slug: decodeURI(post.slug)
            }
        })),
        fallback: isProd ? false: 'blocking'
    }
}

NODE_ENVがproductionになるのは、next buildまたは明示的に指定した時のみです。たぶん。

なのでnext devでローカル開発している時は、getStaticPathsで生成するページ数を絞って、もし見たいページが未生成ならfallbackさせてSSRするようにしています。

これなら記事数の多いサイトの見た目をちょっと弄りたい時などにいちいち全ページのSSGを待つ必要がありません。