Next.js App Router入門ガイド

Next.js2025-01-201分で読める

Next.js App Routerとは

Next.js 13から導入されたApp Routerは、Reactの最新機能を活用した新しいルーティングシステムです。

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

App Routerでは、app/ディレクトリ内のファイル構造がそのままURLに対応します。

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

レイアウト

layout.tsxを使うことで、ページ間で共有されるUIを定義できます。

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}

Server ComponentsとClient Components

App Routerでは、デフォルトでServer Componentsが使用されます。クライアントサイドのインタラクションが必要な場合は、"use client"ディレクティブを使います。

"use client";

import { useState } from "react";

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

静的サイト生成 (SSG)

next.config.tsでoutput: 'export'を設定すると、完全な静的サイトを生成できます。

const nextConfig: NextConfig = {
  output: "export",
  images: { unoptimized: true },
};

動的ルートを使う場合は、generateStaticParams()で事前にパラメータを定義します。

export async function generateStaticParams() {
  const posts = getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

まとめ

Next.js App Routerは、モダンなWebアプリケーション開発のための強力なフレームワークです。Server Components、レイアウトシステム、そしてSSGのサポートにより、パフォーマンスとDXの両方を向上させることができます。

Server ComponentsとClient Components

"use client";

import { useState } from "react";

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

静的サイト生成 (SSG)

next.config.tsでoutput: 'export'を設定すると、完全な静的サイトを生成できます。

const nextConfig: NextConfig = {
  output: "export",
  images: { unoptimized: true },
};

動的ルートを使う場合は、generateStaticParams()で事前にパラメータを定義します。

export async function generateStaticParams() {
  const posts = getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}