BeaSkyblue

Next.js 読解メモ 01: ルーティングの見方（App Router）

· 2 min read

要点（90秒）

  • URL = app/ のフォルダ構造
    • app/page.tsx → /
    • app/blog/page.tsx → /blog
    • app/blog/[slug]/page.tsx → /blog/任意
    • app/docs/[...slug]/page.tsx → /docs/以下なんでも（キャッチオール）
  • layout と page
    • layout.tsx はその階層の共通枠。必ず {children} を描画。遷移しても再マウントされにくい。
    • page.tsx がURLの中身。上位layoutは下位にも適用。
  • 特別ファイル（必要な階層に置ける）
    • loading.tsx（読み込み中UI）
    • error.tsx（例外UI・"use client"）
    • not-found.tsx（404）
  • リンク 
    import Link from "next/link";
<Link href="/blog">Blog</Link>

最小のフォルダ地図（60秒）

app/
  layout.tsx           # 全体の枠（必須）
  page.tsx             # /
  blog/
    page.tsx           # /blog
    [slug]/
      page.tsx         # /blog/xxx

読み方のショートルーチン（30秒）

  1. URLをパスに分解 → app/以下で同形のフォルダを探す
  2. まず layout.tsx → 次に page.tsx
  3. 動的なら [param] / [...param] を確認

ワンポイント

  • 404や例外が欲しければ、対象階層に not-found.tsx / error.tsx を置く（粒度を分けられる）

次の記事（**02: Server/Client 境界**）も同じ形式で用意してあります。必要になったら続けて送ります。