ブログをNext.jsへ移行した

課題感

1年以上前にGatsby + Netlify の新しいブログを作ったけれど、 Gatsby を理解していないせいでカスタマイズが難しいなどの問題があって課題を途中から感じていた。

その中で @wapa5powさんのブログをNext.jsへ移行しましたをみて、課題感もかなり似ていたので、いつか移行したいなと思っていて、年末ということもあり移行することにした。

概要

テンプレート

blog-starter-typescriptのテンプレートを使ってブログを作成した。 これで Markdown をベースに SSG で静的なブログが作れる。

Deploy

Deploy とホスティングはVercelを使っている。

体感だが以前より表示が速くなった気がする。

OGP

OGPもnode-canvasを使っていて、 yarn build 時に自動生成されるようにした。

Canvas は最新バージョンだとVercelのnodeのバージョンが対応しておらずビルドできなかったので以下を参考にした。

• 【Next.js × Vercel】OGP画像を動的生成してみた
• Next.js + Vercel で OGP の画像を動的に生成する
• 【動的OGP】Next.js + TypeScript + Vercelデプロイで動的OGPを実現する

動的と言っても静的ビルド時にMarkdownからタイトルを持ってきてpngとして書き出しているだけなので、リクエスト毎に生成されるわけでは無いので優しい。

CSS

Tailwind CSSというのがバンドルされていたのでそれを使っている。 適当に検索して書くと良い感じのpaddingやmargin、リサイズしてくれるので便利。 正直雰囲気で書いている感は否めない。