【Everyday Next.js】5. Routing Fundamentals

Next.js Routing の基本

Next.js 13 から App Router が導入された。

前までの Pages Router と大きく仕様が変わっているため、ググって出てくる情報にはバージョンの差異がないか注意が必要。

といっても基本原理は変わらない。

Next.js の Routing は、ファイルシステムベースルーティングになっている。

以下の図のように、原則、app フォルダ下のフォルダ構成によって、URL パスが決定する。

そして、そのフォルダの中に特定のファイル名を持つファイル群を設置することでそのページの中身を決定する。

ファイル名	説明
layout	セグメントとその子の共有 UI
page	ルートのユニークな UI とルートの一般公開
loading	セグメントとその子の UI をロードする
not-found	セグメントとその子の UI が見つからない
error	セグメントとその子のためのエラー UI
global-error	グローバルエラー UI
route	サーバーサイド API エンドポイント
template	特殊化された再レンダリングされたレイアウト UI
default	並列ルートのフォールバック UI

この特定の役割を持ったファイル群は、以下のような階層でレンダリングされる。ネストされた Route の場合は、入れ子でレンダリングされる。

試してみる

parent フォルダ、child フォルダに layout.tsx、page.tsx を作って、どのようにレンダリングされるかを実際に試してみる。

// app/parent/layout.tsx
export default function ParentLayout({children}: {children: React.ReactNode}) {
  return (
    <div>
      親レイアウトbegin
      {children}
      親レイアウトend
    </div>
  );
}

// app/parent/page.tsx
export default function Parent() {
  return <div>これは親ページです。</div>;
}

// app/parent/child/layout.tsx
export default function ChildLayout({children}: {children: React.ReactNode}) {
  return (
    <div>
      子レイアウトbegin
      {children}
      子レイアウトend
    </div>
  );
}

// app/parent/child/page.tsx
export default function Child() {
  return <div>これは子ページです。</div>;
}

レイアウトの中にページ、そしてネストされている場合は入れ子のようにレンダリングされていることがわかる。

おわりに

今回は、Next.js App Router の基本原理を理解した。次回は、App Router の扱い方をもう少し詳しく見ていく。