Next.js v15にアップデートしました

このサイトのNext.jsのバージョンを14から15にアップデートしました。

このタイミングでPage RouterからApp Routerへの移行も行いました。

つらかったこと

もともとスタイリングにCSS in JSライブラリのEmotionを使っていましたが、App Directoryにまだ対応してないようです。

Next.jsの公式サイトにもサポート中のライブラリとしてリストアップされています（2025.03.12現在）

https://nextjs.org/docs/app/building-your-application/styling/css-in-js

さらには上記のページによると、CSS in JSライブラリはServer Componentに対応してないようなので、このままEmotionを使うならPage Routerのままで全てClient Componentにする必要があり、アップデートの恩恵があまり得られません。

そのため、これを機に思い切ってTailwind CSSに全て置き換えました。

CSSの置き換えは面倒ですが、Chat GPTに指定しているCSSを投げれば、Tailwind CSSのclassを返してくれます。このおかげでだいぶ作業時間は短縮できました。便利な時代です。

予想外のことでCSS書き換えになり疲れましたが、サイトの表示がかなり速くなったし、Next.JSの便利な機能も試していけます。

いつかやらなきゃと思ってましたが、ようやくスッキリできました。