Next.js 13.4.6にUpgradeしApp Routerを使ってみて現時点での移行すべきかどうかの感想

概要

Next.jsの13.4.0からApp Routerがstableになり、個人的に一度App Routerを使ってみたかったため、このブログをNext.js 13.4.6にUpgradeしてみました。

現状で移行すべきか

2023年7月時点では、プロダクション環境でApp Routerに移行するにはまだ少し早いのかなと思いました。
問題があるというよりは、複数人チームに対して学習コストと、エラーが起きたときの情報量がまだ少なめというところが気になって、工数やスケジュールを気にしながらやっていくのはもう少し先でもいのかなという印象です。
また、Pages RouterからApp Routerに移行するのにかかるコストが、App Routerで得られるメリットにまだ足りないような感じがします。

レイアウトのネスト

App Routerでは、ディレクトリ構造でレイアウトのネストを表現することができるようになりました。
感覚的にはReact Router v6のレイアウトの考え方に近くて、ルーティングとレイアウトのネストを紐づけて考えましょうという思想を感じました。
Next.js Document: Layout

例えば管理画面系のアプリケーションでヘッダーとサイドバーの描画をするレイアウトをルートディレクトリに配置すると、配下のページにもそのレイアウトが適用され、同一レイアウトが適用されているページ間の遷移ではヘッダーやサイドバーの再描画が発生しなくなります。

Server Componentの意識

コンポーネントをServer ComponentとするかClient Componentとするかは use server use client という記述によって宣言できます。
App Router配下ではデフォルトがServer Componentとなっているので、なにも宣言がなければServer Componentになります。
ReactにおけるデフォルトのコンポーネントはClient Componentなので、意識しながらコンポーネントを作成していく必要があります。
というか本来Next.jsでSSGする場合でも細かくコンポーネントごとにそれはサーバーサイドで生成されるべきなのかクライアントサイドで生成されるべきなのか意識しておく必要がありましたが、App Routerに移行することで細かいところまで意識するようになりました。

ディレクトリ構造とコンポーネントの作り方を併せて考えていくときのファイル配置のベストプラクティスがまだ自分の中で定まっていないので、もう少し時間をかけて考えていきたいと思います。

学習コストと移行コスト

そこまで学習コストは高くないとは感じましたが、App Routerで何がどうなるのかを理解するコストがそこまで高くないという話であって、Documentをすべて理解したからと言ってスムーズに移行できるかと言ったら少し微妙です。
レイアウトやhooksの作り方や適用の仕方をApp Router向けに考え直したり、App Routerにしようとしたことで初めて遭遇するエラーもあるのでそれに対する修正コストもあります。

Pages Routerとの共存

App RouterとPages Routerは共存できるので段階的に移行できると公式ドキュメントに書いてあります。
Next.js Document: App Router Incremental Adoption Guide

私の場合は実装方法に問題があったかもしれないのですが、Pages RouterとApp Routerを共存させようとしたことでエラーを発生させていたところがありました。
段階的に移行できるならそうしたい気持ちだったので、まずはトップページだけApp Routerにしようと考えましたが、ページ遷移やレンダリング時にすぐに解消できないいくつかのエラーと遭遇してしまったため、試しに全ページをApp Routerに移行したら解消されました。
大規模なアプリケーションではできれば段階的に移行したいですが、それによって解消しづらいエラーが起きてしまうと移行コストが膨らんでしまいます。
実際に移行しようとしてみないと気づかないところもたくさんあるので、これも現時点では移行しづらいと感じる要素です。

まとめ

まったくベストプラクティスではないですが、今回は リポジトリ を公開しているこのブログのNext.jsのバージョンを13.4.6にしたので、良かったら見てみてください。