📝
Next.jsのApp RouterとPagesRouterの違い、メリット、デメリット、導入の基準
そもそもこの両者は何か
-
Pages Router
Next.jsの従来のルーティングシステムで、 -
pages/ディレクトリを基にしたルーティング方法です。
App Routerは、Next.js13で導入された新しいルーティングシステムで、app/ディレクトリを基にした設計です。
レイアウトは各ページごとに設定するのと共有レイアウト(layout.tsx)で違いもあったりするみたいです。
App Routerのメリット
RSCでバックエンドの処理がNext.jsに書くことができたりします。
バックエンドの処理もフロントエンドに書けてしまいます。
バックエンドよりになってきた感じですね。
小規模開発でできたりします。アプリを高速で作れる感じです。
App Routerのデメリット
1.採用コストとキャッチアップに時間がかかりそうな感じです。
2.フロントとバックがわかりづらいのでコードが肥大化すると仕様理解がわかりづらい感じです。
3.App Router独自の仕様になっています。
キャッチアップの予想
2024年9月時点では習得は必須ではないと思います。
理由はこの段階では、企業もまだ情報が少なく、キャッチアップに難易度があるので、2027年くらいまではそんなにいろんな企業が導入しまくるのはなさそうな気はします。
新規開発では、App routerも予想されますが、既存サービスでは少なそうです。
結論新規プロジェクト: App Routerを使い、既存プロジェクトでPages Routerを使っている場合、App Routerに移行するかどうかはケースバイケースになってくると思います。
参考資料
Discussion