Next.js で利用しているルーティングの処理が、13.4 から新しい App Router に切り替わりました。従来の仕組みは Page Routing という形になり、従来の仕組みはもちろん利用できますが、新しい App Routing でアプリが今後主流になってきます。そこで、今回はこの App Router に関して確認をしていきます。
App Router と Page Router の違い
大きな違いとしては、パスの考え方が変わったと考えてください。詳細は公式サイトのページや、他のブログとかでも取り上げられているので、細かいことを知りたい場合は別途調べてください。
従来の Page Router の場合は以下のような動きをしていました。
pages/index.tsx -> ルートページとして動作
pages/blog.tsx -> /blog のページとして動作
pages/blog/index.tsx -> /blog のページとして動作
pages/pages/[id].tsx -> pages/id （id は任意）という形で動作
要は Pages のフォルダの下にあるファイルは、基本的にルーティングの対象になっていました。もちろん、上記の例はわかりやすく書いていますが /blog のページを作るときにどうするべきなのか、というのに２パターンあることがわかります。
一方 App Router になるとどうなるでしょうか？すべてのファイルが対象ではなく、役割のあるファイルが定義されています。
例えば以下のような形となります。
app/page.tsx > / のページとして動作
app/blog/page.tsx > /blog のページとして動作
app/[id]/page.tsx > /id/ のページとして動作
page 以外にも error や layout などのファイルも利用することができるようになるため、ある程度規模が大きくなってきたときに柔軟に対応できるようになります。ルーティングされるルールに関しては、Project Organization and File Colocation のページで紹介されています。
新しいプロジェクトを作って確認
早速ですが新しいアプリケーションを作成して確認したいと思います。コマンドラインで以下のコマンドを実行してください。
npx create-next-app実行した結果は以下の通りです。
従来と異なるのが、４つ目の質問で /src を利用しますか？となっているところを No としています。また App Router を利用しますか？に対しては Yes を選択しています。
実際に作成したプロジェクトを Visual Studio Code で開いてかk層を確認するとこんな感じになっています。
App フォルダに入っている page.tsx がトップページを表示している形です。実行すると以下のページが表示されます。
以下でコードと動作確認ができます。
まとめ
従来の Page Router の仕組みと異なる App Router ですが、いくつかのメリットはありつつも例えば XM Cloud のサンプルに関してはまだ Page Router を利用している状況です。このブログでは、Next.js をサンプルとして動かすものは App Router で作成していきますが、XM Cloud に関しては Headless SXA のインプリに合わせて記述していくようにします。