はじめに
2023年5月にNext.js 13.4がリリースされ、App Router という機能が安定板扱いになりました。
今までの Pages Router との違いを整理するため、この記事では、Pages Router と App Router のルーティングについて、記載していきます。
共通点
Pages Router と App Router の両方ともファイルベースのルーティングという点では共通しています。
Pages Router のルーティング
Pages Router のルーティングでは、src/pages フォルダ配下にファイルやフォルダを追加することで、ルーティングが定義されます。
例えば、pages/client-side-rendering.tsx のようにファイルを追加すると、ルーティングは、/client-side-rendering になります。
また、pages/renderings/client-side-rendering.tsx のようにフォルダを追加すると、ルーティングは、/renderings/client-side-rendering になります。
App Router のルーティング
一方、App Router のルーティングでは、src/app フォルダ配下にファイルやフォルダを追加することで、ルーティングが定義されます。Pages Router とは違い、ルーティングに利用するファイル名には、page をつける必要があります。
例えば、ルーティングを /client-side-rendering にしたい場合、フォルダ・ファイル構成は、app/client-side-rendering/page.tsx とする必要があります。
また、/renderings/client-side-rendering にしたい場合は、app/renderings/client-side-rendering/page.tsx とする必要があります。
まとめ
以上のように Pages Router と App Router の両方ともファイルベースのルーティングという点では共通しています。
ただ、 Pages Router の場合、ルーティングに利用するファイルは、他のファイルとは分け、src/pages 内で管理する一方、App Router の場合、ルーティングに利用するファイルを src/app 内で他のファイルと共に管理するという点では違います。