年末にNuxt/Content を使ったサイトにリニューアルしたのですが、ソースが汚くていじる気がしなくなってきたいろいろ気に入らないところが出てきたので、Next.jsとContentlayerを使う仕組みに書き直しました。

• App Router が stable になったので、触ってみたかった。

選定

• Next.js
  • 13 です。正直 React はまだあんまりよくわかってないのですが、関数コンポーネントの書き味が良いので、ちゃんと勉強していきたい。
• NextUI
  • TailwindCSS ベースの UI フレームワーク
  • 開発版の v2 を使っています。
• Tailwind CSS
  • CSS フレームワーク
• Contentlayer
  • Markdown、mdx 形式のファイルを json にコンバートしてくれる
    • これにより、Next.js の Dynamic Router で Markdown コンテンツでのルーティングが可能になる。

デザイン

• 基本的には Nuxt 版に沿って作り直してます。
  • Nuxt 版の時の permalink が切れないようになっている……はず。
• 細かいところですが、ダークモード対応ができるようになりました。
• テーマはもうちょっといじりたい。
• Next.js での OGP 対応がまだよくわかってないので、上手くできてなければ直す。