お久しぶりです！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のときは、

blog-posts
└ index.md
└ blog.png

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

まとめ

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