Next.js 13から導入され、今や標準となった「App Router」。従来のPages Routerから大きく概念が変わったため、まだ移行に足踏みしている方もいるかもしれません。 この記事では、App Routerを理解するための基礎をステップバイステップで解説します。
ステップ1：ディレクトリ構造の違いを理解する
従来のPages Routerでは、pagesディレクトリ内のファイル名がそのままURLルーティングになっていました（例：pages/about.tsx → /about）。
App Routerでは、appディレクトリを使用します。URLルーティングはフォルダ名で決定され、そのフォルダの中に必ずpage.tsxという名前のファイルを置くルールに変わりました（例：app/about/page.tsx → /about）。
一見面倒に見えますが、これによって「ルーティングに関係のないコンポーネントやテストファイルを、同じフォルダ内に共存させることができる」という大きなメリットが生まれました。
ステップ2：レイアウトの概念を掴む
App Routerの強力な機能が「Layout」です。
app/layout.tsxを作成すると、そのフォルダ以下のすべてのページに共通のUI（ヘッダーやフッターなど）を適用できます。
特筆すべきは、ページ遷移時にこのLayout部分は「再レンダリングされない」という点です。これにより、状態（State）を保持したままの滑らかな画面遷移が実現でき、アプリケーションのパフォーマンスが大きく向上します。
ステップ3：サーバーとクライアントの境界線を引く
これが最も重要な変更点です。App Router内のコンポーネントは、デフォルトで「React Server Components（サーバー側で実行されるコンポーネント）」になります。
サーバーコンポーネント内では、ブラウザのAPI（windowなど）や、Reactのフック（useStateやuseEffect）は使用できません。
もしボタンのクリックイベントなどが必要な場合は、ファイルの先頭に "use client" と記述し、明示的にクライアントコンポーネントに変換する必要があります。
「基本はサーバーで軽くレンダリングし、インタラクティブな部分だけをクライアントに任せる」という意識を持つことが、App Router攻略の鍵です。
ステップ4：データフェッチの簡略化
これまで必須だったgetServerSidePropsやgetStaticPropsといったNext.js独自の関数は廃止されました。
代わりに、標準のfetch APIをコンポーネント内で直接 await して使うだけです。Next.jsが内部でfetchを拡張しており、キャッシュの制御などもこのfetchのオプション引数だけで直感的に行えるようになりました。
段階を踏んで理解すれば、App Routerは決して怖いものではありません。より高度で高速なWebアプリ開発に向けて、ぜひ最初のステップを踏み出してみてください。