Next.js App Router の基本を理解する

Next.js App Router とは

Next.js 13 以降で導入された新しいルーティングシステムです。従来の Pages Router と比べて、より柔軟で強力な機能を提供します。

主な特徴

1. ファイルベースルーティング

app ディレクトリ内のフォルダ構造がそのまま URL になります：

app/
  page.tsx          → /
  posts/
    page.tsx        → /posts
    [slug]/
      page.tsx      → /posts/:slug

2. Server Components がデフォルト

App Router では、すべてのコンポーネントがデフォルトで Server Component として動作します。これにより、パフォーマンスが向上し、バンドルサイズが削減されます。

// これは Server Component
export default function Page() {
  return <div>Hello from Server!</div>
}

Client Component が必要な場合は、'use client' ディレクティブを使用します：

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

3. レイアウトの共有

layout.tsx を使用して、複数のページ間でレイアウトを共有できます：

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <header>共通ヘッダー</header>
      <main>{children}</main>
      <footer>共通フッター</footer>
    </div>
  )
}

動的ルーティング

動的なパスを扱うには、[param] という命名規則を使用します：

// app/posts/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map((post) => ({
    slug: post.slug,
  }))
}

export default async function Post({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPost(slug)
  return <article>{post.content}</article>
}

メタデータの設定

generateMetadata 関数を使用して、動的にメタデータを設定できます：

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPost(slug)

  return {
    title: post.title,
    description: post.description,
  }
}

データフェッチング

Server Components では、async/await を直接使用できます：

async function getData() {
  const res = await fetch('https://api.example.com/data')
  return res.json()
}

export default async function Page() {
  const data = await getData()
  return <div>{data.title}</div>
}

まとめ

App Router は Next.js の新しい標準となり、以下のメリットを提供します：

パフォーマンス向上: Server Components によるバンドルサイズの削減
より良い DX: レイアウト、エラーハンドリングなどの改善
柔軟性: Server/Client Components の使い分け

従来の Pages Router からの移行は段階的に行うことができるので、新しいプロジェクトでは積極的に App Router を採用することをおすすめします！