App Routerでページ遷移

このページで学ぶこと

Next.js の App Router でページを追加できる
<Link> コンポーネントでページ間を移動できる
動的ルーティング（URLパラメータ）を使える

App Router の仕組み

Next.js 16 では app/ フォルダの構造がそのままURLになります。

app/
├── page.js          → http://localhost:3000/
├── about/
│   └── page.js      → http://localhost:3000/about
└── users/
    ├── page.js      → http://localhost:3000/users
    └── [id]/
        └── page.js  → http://localhost:3000/users/1, /users/2, ...

ルールは2つだけ

フォルダを作る → そのフォルダ名がURLのパスになる
そのフォルダの中に page.js を置く → そのファイルがページの内容

やってみよう

ステップ1: トップページとAboutページを作る

トップページ (app/page.js):

// app/page.js
import Link from 'next/link'
 
export default function Home() {
  return (
    <main>
      <h1>ホーム</h1>
      <p>これがトップページです。</p>
      {/* ページ遷移には <a> ではなく <Link> を使う */}
      <Link href="/about">Aboutページへ</Link>
    </main>
  )
}

Aboutページ (app/about/page.js):

app/about/ フォルダを作成し、page.js を作る。

// app/about/page.js
import Link from 'next/link'
 
export default function About() {
  return (
    <main>
      <h1>About</h1>
      <p>このサイトについてのページです。</p>
      <Link href="/">ホームへ戻る</Link>
    </main>
  )
}

<a> ではなく <Link> を使う理由
<a href="..."> を使うと、ページ全体がリロードされます。
<Link href="..."> を使うと、必要な部分だけ更新されるので高速です（これをクライアントサイドナビゲーションといいます）。

ステップ2: レイアウトを作る

app/layout.js はすべてのページで共通のレイアウトです。ナビゲーションバーをここに入れましょう。

// app/layout.js
import Link from 'next/link'
import './globals.css'
 
export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>
        {/* 全ページ共通のナビゲーション */}
        <nav style={{ padding: '16px', borderBottom: '1px solid #ccc' }}>
          <Link href="/" style={{ marginRight: '16px' }}>ホーム</Link>
          <Link href="/about" style={{ marginRight: '16px' }}>About</Link>
          <Link href="/users">ユーザー一覧</Link>
        </nav>
 
        {/* 各ページの内容が ここに入る */}
        <main style={{ padding: '16px' }}>
          {children}
        </main>
      </body>
    </html>
  )
}

ステップ3: 動的ルーティング

URLの一部を変数にできます。これを動的ルーティングといいます。

app/users/ フォルダと app/users/[id]/ フォルダを作成する。

ユーザー一覧 (app/users/page.js):

// app/users/page.js
import Link from 'next/link'
 
export default function UsersPage() {
  const users = [
    { id: 1, name: '田中太郎' },
    { id: 2, name: '鈴木花子' },
    { id: 3, name: '佐藤次郎' },
  ]
 
  return (
    <div>
      <h1>ユーザー一覧</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {/* /users/1, /users/2 ... に遷移 */}
            <Link href={`/users/${user.id}`}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

ユーザー詳細 (app/users/[id]/page.js):

// app/users/[id]/page.js
 
export default function UserDetailPage({ params }) {
  // URLの [id] 部分が params.id で取得できる
  const { id } = params
 
  return (
    <div>
      <h1>ユーザー詳細</h1>
      <p>ユーザーID: {id}</p>
    </div>
  )
}

/users/1 にアクセスすると「ユーザーID: 1」と表示されます。

URLのパス設計

URL	フォルダ構造
`/`	`app/page.js`
`/about`	`app/about/page.js`
`/users`	`app/users/page.js`
`/users/123`	`app/users/[id]/page.js`
`/blog/2024/hello`	`app/blog/[year]/[slug]/page.js`

確認しよう

app/about/page.js を作成してアクセスできた
<Link> でページ間を移動できた
app/layout.js でナビゲーションを共通化できた
app/users/[id]/page.js で動的ルーティングを実装できた

AIに聞いてみよう

「Next.jsのApp RouterでuseRouterを使ってプログラムからページ遷移するにはどうしますか？」

次のステップ

→ 🔒 XSSを理解して対策する