[今さら始める Next.js マスター #2] App Routerとルーティングを理解する

App Routerの基本

Next.jsのApp Routerでは、appディレクトリのフォルダ構成がそのままURLになります。設定ファイルでルートを一つずつ登録するのではなく、必要な場所にフォルダとpageファイルを作るだけでページを追加できます。

app/
  page.tsx          -> /
  about/page.tsx    -> /about
  blog/page.tsx     -> /blog

動的ルート

記事詳細やユーザープロフィールのように、URLの一部が変わるページでは動的ルートを使います。

app/blog/[slug]/page.tsx

この構成では、/blog/nextjs-routingのようなURLを受け取り、slugを使って該当するデータを表示できます。

レイアウトで共通UIをまとめる

layout.tsxを使うと、複数ページで共通するヘッダー、ナビゲーション、サイドバーなどをまとめられます。

export default function BlogLayout({ children }) {
  return (
    <main>
      <aside>Blog menu</aside>
      {children}
    </main>
  );
}

ページごとに同じUIを繰り返し書かずに済むため、アプリが大きくなっても構造を保ちやすくなります。

Loading UIとError Boundary

loading.tsxを置くと、データ取得中の表示をルート単位で用意できます。error.tsxを置くと、その範囲で発生したエラーを画面として扱えます。

ファイル	役割
page.tsx	ページ本体
layout.tsx	共通レイアウト
loading.tsx	読み込み中のUI
error.tsx	エラー時のUI

Route Groups

URLには出したくない管理用のまとまりには、(group)形式のRoute Groupsが便利です。

app/
  (marketing)/about/page.tsx
  (dashboard)/settings/page.tsx

見た目や責務ごとにファイルを整理しながら、URLはシンプルに保てます。