2023年5月にリリースされたNext.js 13.4からルーティングの処理が従来のPages RouterからApp Routerに切り替わり、どちらの機能を利用することも可能ですが、今後はApp Routerを利用することが推奨されています。
2つのルーティングの仕組みに関する特徴を理解するため、記事にしたいと思います。
以下はあくまで二つのルーティングの違いについて一部の要素に過ぎないので、私の理解が深まり次第随時追記していきたいと思っています。
Pages Router
ルーティング フォルダ構成
Pages Routerは、'pages'フォルダ配下に追加されたファイルやフォルダ名をもとに、ルーティングを定義します。
例えば、'pages/login.tsx'のようにファイルを追加すると、'/login'へのアクセス時に'login.tsx'ファイルの内容が表示されます。また、'pages/login/index.tsx'のようにすることもできます。
App Router
ルーティング フォルダ構成
App Routerは、'app'フォルダ配下にファイルやフォルダを追加することで、ルーティングが定義されます。
例えば、'/login'へのルーティングを作成する場合、'app/login/page.tsx'とする必要があります。
上記のように、フォルダ名でルートを指定し、'page.tsx'ファイルで内容を表示する仕様になっております。
また、App Routerを使用する際には共通のレイアウトを表示させる'app/layout.tsx'ファイルの作成が必須となります。
React Server Component(RSC)
App Routerで作成されるコンポーネントはすべて Server Component(サーバー側でレンダリング) として扱われます。Pages Routerでは全てClient Component(クライアント側でレンダリング)でした。App Router内でClient Component として扱うには、ファイルに 'use client' と記載する必要があります。"use client"と記載したファイル内にimportしたファイルは、全てClient Conponentとして解釈されます。以下の例の場合、Labelをimportしていますが、Labelファイル内に'use client'を記載していなくてもClient Componentになります。
"use client"
import Label from "./Label"
export default function Login() {
return <Label>login</Label>;
}
Server Componentはリクエスト前にレンダリングをし、クライアントのJavaScriptのバンドルサイズを減らすことができるため、パフォーマンスが向上します。しかし、Server Componentはクライアント側で実行される React Hooks や イベントハンドラーが使えないなどのデメリットもあります。このような処理をするには Client Component として扱う必要があります。
Route Groups
ディレクトリ名を(フォルダ名)のようにして囲うと、そのフォルダがURLパスに含まれないようにすることができます。
例えばログイン済みユーザーのディレクトリは(app)、ゲストユーザーのディレクトリは(auth)のようにディレクトリを分けることで、それぞれのディレクトリ毎にレイアウトを分けることができます。