Mission-Street.

脱 Gatsby.js すべく Next.js のドキュメントを読みながら SSG でブログを再構築しようとしている
個人的な感想だけど、Gatsby.js よりもとっつきやすい気がするのと、公式のドキュメントが大変わかりやすいので割とスムーズに移行作業が進んでいる

今回は Next.js の App Router で SSG する際に色々調べたので、要点だけ簡単にメモしておこうと思う

SSG モードを有効にする

これをしないと始まらない

module.exports = {
  // https://nextjs.org/docs/app/building-your-application/deploying/static-exports
  output: 'export',
}

これで npm run build でルートディレクトリの out というフォルダに静的なファイルが出力されるようになる

記事一覧ページにおける記事データの取得

ここが一番よくわからなかった部分だったけど、旧 Pages Router のドキュメントと見比べるとこうなるっぽい

• Pages Router
  • getStaticProps という関数を用意して、よしなに記事データを取得して props としてコンポーネントに渡す
  • https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props
• App Router
  • 記事データを取得する関数を ${root}/lib/api.ts みたいなところに用意して、それを普通にコンポーネント(app/page.tsx)内で呼べばよい
  • https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch
    • ↑ のサンプルコードの fetch を glob なり fs なりで置き換えて記事データを持ってくればいい

記事の個別ページ

このブログは hakozaru.com/posts/:slug というパスで作られているので、App Router でのディレクトリ構成は app/posts/[slug]/page.tsx となる

最初 [slug] というディレクトリ名が信じられなくてホンマか？？？となったけど、Pages Router 時代から普通に使われてた
https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#example

記事の個別ページはどうやって用意するのかというと、これも旧 Pages Router と比較すると以下のようになるっぽい

• Pages Router
  • ↑ の記事一覧ページのやり方と同じく、 getStaticProps を使えばよい
• App Router
  • generateStaticParams という関数が用意されているのでそれを使う
  • 多分コンポーネント内で普通に記事データを取得する関数を自前で用意しても動くけど、この関数は同じ引数で呼び出されたりした時にメモ化されて、ビルド高速化したり恩恵があるのでこれを使うのが良さそう
  • https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params

Sass を使う

こちらに書いてあるが、デフォルトで使えるようになっている
旧ブログの資産をまんま流用したいので使っている(本当は Tailwindcss に移行したいけどﾈ-)

module.exports = {
  output: 'export',
  sassOptions: {
    includePaths: [path.join(__dirname, 'css')],
    prependData: '@import "css/global.scss";',
  },
}

includePaths で sass/scss が入っているディレクトリを指定して、必要に応じて prependData で global.css や reset.css などを指定してやればよい

ひとまずこのあたりがわかれば簡単にブログ構築できると思うので、これを見ているあなたもぜひ！