HugoからNext.js (App Router) にブログを移行してみた

お久しぶりです！Sandyマンです。

前回、「HugoをやめてGatsbyで最強なブログを作る」 という記事を投稿したのですが、いろいろあって結局Next.jsのApp Routerを使ってブログを作ることにしました。

そしてそのブログがやっとできたので、使用技術や苦労したところなどを書いていこうと思います。

使用技術

• Next.js 13 (App Router)
• Tailwind CSS
• Vercel
• Google Analytics (GA4)

だいたいこんな感じで作りました。

実装したもの

• タグ、カテゴリーによる分類
• ページネーション
• ソースコードのハイライト（rehype-prism-plusを使用）
• 目次
• アイキャッチに絵文字を表示
• ブログのコードと記事のリポジトリを分離

ブログとして必要な機能は概ね実装したつもりです。ダークモードも作ろうと思っていたのですが、面倒なのでやめました。

アイキャッチの絵文字は、ZennやCatNoseさんのブログを見てかわいいなと思ったので作りました。絵文字を選ぶだけで華やかになるので便利です。react-emoji-render というライブラリをフォークして使ってます。

苦労した点

デザイン

デザインに関しては知識もないしセンスもまったくないので、てきとうにTailwind CSSを使ってやりました。そこまで酷くないデザインになったと思うので、まあいいかなって感じです。

App Router

正式にリリースされたのが5月ぐらいというので、とにかく情報が少なくて苦労しました。ドキュメントを見ながらなんとか実装しました。App Router自体はとても便利で良いと思います。これから主流になるのかなと思います。

記事内での画像表示

Hugoのときは、

1blog-posts
2└ index.md
3└ blog.png

みたいな感じで画像とマークダウンファイルを同じディレクトリで管理していました。ですがNext.jsでは画像はpublicディレクトリに入れないといけないようで少し悩みました。いろいろやってみてビルド前に画像をpublicにコピーすることで解決できました。

まとめ

こんな感じでブログを作ってみました。我ながらなかなかいいものができたと思っています。暇なときに書いていこうと思ってるのでよろしくお願いします。それではさようならーーー！