ブログを Next.js で再構築した

なぜ Next.js を選んだか

Hakyll の課題

もともとこのブログは、Haskell 製 Static Site Generator である Hakyll を使っていました (Ruby 製の Jekyll をもじったツールですね)。ただ、ページ内構成やスタイルなどのカスタマイズがなかなかできず、ほぼ初期構成のままという状態でした。

というのも、Hakyll は Pandoc を使って HTML の AST をいじくる、みたいな仕組みになっていて、要素を走査したり追加したりが難しかったりします。TOC を生成してくれる便利ライブラリみたいなものもあまりないので、多くの部分を自前で実装する必要があります。

それはそれで楽しいのですが、あまりに放置しすぎたので、もっとブログを作りやすいツールに移行したいな考えるようになりました。

Next.js の選定理由

なぜ Next.js を選んだのかというと、業務で多少は React を触りますし、以前にも Next.js に乗り換えようとしたことがあって入門が済んでいたからです。App Router が出てから随分経ちますし、オーバースペックであることはあっても、機能性で困ることはないだろうと考えました。

結果的には Next.js を選んで良かったです。スタイルも一から作り直したので、全体としては時間がかかりましたが、コアの部分はそこまででした。

こだわったところ

あくまで SSG

これまで通り静的サイトを Netlify でホストするようにしています。

URL 構成は維持

検索エンジンにインデックスされてるページも多いので、URL 構成は維持するようにしました。以下のようなページは Dynamic Routing で生成する必要があり、少し大変でした。

/posts/[category]/[title]
- 個別の記事ページ
/categories/[category]/[index]
- カテゴリーに属する記事の一覧ページ
- /categories/programming/1 など
/tags/[tag]/[index]
- タグが付与された記事の一覧ページ
- /categories/Nextjs/1 など

数式

もともと MathJax を使っていましたが、このタイミングで $\KaTeX$ に乗り換えました。 $\KaTeX$ のほうが描画が軽快です。MathJax では大きな可換図式が表示できてない記事なんかもあったりしましたが、 $\KaTeX$ では問題なく表示できるようになりました。

ワンポイントアドバイスとしては、global.css 等に以下のようなスタイルを設定しておくと良いと思います。これで長い数式が親要素を突き破るようなことがなくなります。

.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
}

スタイル

スタイリングには Tailwind CSS を利用しています。Typography やカラースキーマは一部有料のものを購入しました。マージンや文字サイズを調節したり、モバイルでは目次を非表示にしたりなど、適宜修正を加えています。今のところはめちゃくちゃモノトーンですが、満足しています。

再配布禁止のものを使う場合は、リポジトリを private にする必要があることには注意しましょう。

苦労したところ

yarn dev と yarn build とで差がある

開発中は yarn dev で開発サーバーを立てながら作業をしました。yarn dev は SSR なので、SSG とは挙動が異なります。せっかく整えた CSS が SSG では崩れていたり、なんてこともありました。Netlify のステージング環境で確認したり、ローカルに nginx 等のサーバーを立てて確認したりなどの作業が必要です。

CSS

上の問題関係なく、スタイリングが全然うまくいかないこともありました。CSS 難しい...。でも大枠はコピペだったので、悩んだのも 2 箇所くらいだったかなと思います。

さいごに

インターネット上に情報も多いですし、自由にカスタマイズもできるので、静的ブログに Next.js を採用するのは非常におすすめです。