Nuxt v2製のポートフォリオサイトをNext.js(with App Router)に移行した
技術・テクノロジー移行したサイト：y-temp4.com
リポジトリ：y-temp4/y-temp4.com: My Portfolio Site.
最近は Next.js を使うことのほうが多く、ポートフォリオサイトの更新時に Nuxt の v2 を使っていると初回ビルドの遅さなどが気になってきたため移行することにしました。
とりあえず移行を完了することを優先したため、実装はベストプラクティスに沿っていないものがあるかもしれません。その点はご了承ください。
この記事では、移行の手順と移行してみた感想を書いています。
移行の手順
まずは、yarn create next-app で Next.js の新規プロジェクトの立ち上げを行いつつ、App Router のキャッチアップを行っていきました。
App Router はこれまでの Next.js の構造とはかなり異なるため、今でも完全に理解しきれていません。移行時は手を動かしつつ公式ドキュメントを読むことで、少しずつ理解を深めていきました。
今回は静的サイトの移行ということもあり、比較的移行は簡単な部類だったかなとは思います。それでも、新しく知っておかないと移行に支障が出る概念はいくつもありました。公式ドキュメントにて、何度も以下の項目を参照しました。
- Routing: Pages and Layouts | Next.js
- Optimizing: Metadata | Next.js
- Metadata Files: opengraph-image and twitter-image | Next.js
- Routing: Route Groups | Next.js
- Optimizing: Fonts | Next.js
全体的にレイアウトとコンポーネント、メタ情報の移行を適当に並行しながら進めていきました。
今回は Nuxt から Next.js への移行ということで、Vue のコンポーネントから React のコンポーネントに書き換える必要があります。コンポーネントの書き換えについては一部 ChatGPT の GPT-4 に頼りました。スタイリングに Tailwind CSS を使っていたということもあり、ほぼ ChatGPT の出力のままコンポーネントを利用できました。
移行に使ったプロンプトの例：
以下のVueコンポーネントをReactコンポーネントのTSXに書き換えてください。ただし、@applyで指定されているTailwind CSSはclassに直接文字列を指定するように書き換えてください。
（ここにVueのコンポーネントを書く）
（改めてプロンプトを読むと、かなり雑な文章ですね･･･。これでもほぼ問題ないコードを出力してくれました。すごい。）
また、独自に実装していたダークモードの切り替えは画面のチラつきが少し気になったこともあり、next-themes を使うことにしました。next-themes の利用により、画面のチラつきの軽減とコードの削減ができたので良かったです。
移行しなかったこと
今回の移行時に、ついでにデプロイ先を Netlify から Cloudflare Pages に変えました。
Netlify では Nuxt でカスタマイズした 404 ページが動作するように設定できました。一方で Cloudflare Pages にて Next.js でカスタマイズした 404 ページを表示させることはできませんでした。
これは Cloudflare Pages 側の問題なのか、Next.js 側の問題なのか厳密にはまだ特定しきれていないのですが、そもそも 404 ページをカスタマイズする重要性が低いと判断し、無視することにしました。
続いて、PWA にするのを辞めました。PWA は next-pwa を使うことによって動作することは確認できたのですが、別にいらんよなぁとなり、実装したものの削除しました。
移行してみての感想
自分は Next.js の経験があるものの、App Router はほぼ初見ということもあり、最初は正直「App Router を使わない Next.js で移行したほうが良かったか･･･？」と思うこともありました。
しかし App Router のドキュメントを読み、できることを理解していくにつれ、その便利さがわかってきました。App Router を使うと、より規約に沿ってアプリケーション開発ができる印象です。
正直、数ページしかないサイトを作る際は、この規約が足枷になってしまうこともあるかもしれません。しかし、規模が大きくなってくると、この規約があることによる恩恵が大きくなってくると思います。
今回は App Router の素振りも兼ねた移行でしたが、現時点ではとりあえず Nuxt v2 から脱却でき、初期ビルドや HMR も高速になっているので満足度は高いです。
今後はより大規模な Next.js のアプリケーションを開発する際も、App Router を使ってみたいですね。
そして、余談ですがそろそろこのブログも Nuxt v2 から何かしらに移行したいです･･･。
