Next.js: Next.js 16 入門

// app/dashboard/page.tsx — サーバーコンポーネント（デフォルト）
export default async function DashboardPage() {
  const tasks = await fetch('https://api.example.com/tasks');
  const projects = await fetch('https://api.example.com/projects');

  return (
    <div className="grid grid-cols-2 gap-4">
      <TaskSummary tasks={tasks} />
      <ProjectList projects={projects} />
    </div>
  );
}

図：Next.js 16; App Router ファイルシステムルーティング; レンダリングエンジン SSR/SSG/ISR/PPR; データ取得 サーバーコンポーネント; API ルート Route Handlers; ビルドツール Turbopack

# 1. create-next-app でプロジェクト作成（推奨）
npx create-next-app@latest my-next-app --ts --tailwind --app

# 2. プロジェクトディレクトリに移動
cd my-next-app

# 3. 開発サーバーを起動（Turbopack デフォルト）
npm run dev

# 4. ターミナル出力の抜粋
▲  ▲  ▲  ▲  ▲  ▲
 ▲  Next.js 16.2.10 (Turbopack)
 ▲  Local:        http://localhost:3000
 ▲  Environments: .env.local

▲ Next.js 16.2.10
- Local: http://localhost:3000
✓ Ready in 876ms (Turbopack)

開発サーバーが http://localhost:3000 で起動中です。ブラウザでこの URL を開くと、Next.js のデフォルトウェルカムページが表示されます。

// app/page.tsx — 1ページ = データ取得 + レンダリング + インタラクション
export default async function HomePage() {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts/1');

  return (
    <main>
      <h1 className="text-2xl font-bold">Welcome to Next.js 16</h1>
      <p>サーバーでレンダリングされたコンテンツ: {data.title}</p>
    </main>
  );
}

<h1>Welcome to Next.js 16</h1>
<p>サーバーでレンダリングされたコンテンツ: sunt aut facere repellat provident</p>

ブラウザに表示される内容：「Welcome to Next.js 16」という見出しと、API から取得したサーバーサイドレンダリングコンテンツ — データはサーバーで取得され、事前レンダリングされた HTML として配信されます。

// Pages Router 旧モデル (v12)
export async function getServerSideProps() {
  return { props: { data: await fetchData() } };
}
export default function Page({ data }) {
  return <div>{data}</div>; // すべてのコードがクライアントサイド
}

// App Router 新モデル (v16)
export default async function Page() {
  const data = await fetchData(); // コンポーネント内で直接取得
  return <div>{data}</div>; // デフォルトのサーバーコンポーネント
}

Page コンポーネントの UI をレンダリングします。

// ============================================
// Pages Router (pages/posts/[id].tsx)
// getServerSideProps の追加エクスポートが必要
// ============================================
export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  return { props: { post: await res.json() } };
}
export default function PostPage({ post }) {
  return <h1>{post.title}</h1>;
}

// ============================================
// App Router (app/posts/[id]/page.tsx)
// 直接 async コンポーネント、追加エクスポート不要
// ============================================
export default async function PostPage({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.id}`);
  return <h1>{post.title}</h1>;
}

Pages Router: 18 行のコード（getServerSideProps 含む）
App Router: 8 行のコード（直接 async コンポーネント）
サンプルコード 55% 削減

App Router はボイラープレートを 55% 削減：getServerSideProps 不要、直接 async コンポーネント、コンポーネント本体内での自動データ取得。

# Next.js 16 開発サーバー起動、デフォルトで Turbopack 使用
npm run dev

# コンソール出力
▲  ▲
▲  Next.js 16.2
▲  - Local: http://localhost:3000
▲  - Turbopack (experimental): ✓ loaded in 876ms

# 任意のファイルを編集して保存 — 即時ホットフィックス
✔ Updated /app/page.tsx in 3ms

Turbopack 起動時間: 876ms
ホットフィックス適用時間: 3ms
比較 Webpack コールドスタート: 5-10s

Turbopack HMR: ファイル更新あたり 4ms（対 Webpack 50-200ms）。コールドスタート: 876ms（対 5-10s）。大規模プロジェクトビルド: 全体で 10 倍高速。

// app/page.tsx — use cache ディレクティブの使用
import { unstable_cache as cache } from 'next/cache';

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

const getData = cache(
  async () => {
    return fetch('https://api.example.com/expensive-data');
  },
  ['expensive-data'],
  { revalidate: 3600 }
);

データを取得し、結果をレンダリングします。

// ============================================
// PPR 静的シェル + use cache スマートキャッシング
// ホーム = 静的ヘッダー + 動的コンテンツ推奨（1時間キャッシュ）
// ============================================

// app/page.tsx
import { Suspense } from 'react';
import { RecommendedProducts } from './RecommendedProducts';

export default function HomePage() {
  return (
    <div>
      <header className="bg-gray-100 p-4">
        <h1>Welcome to ShopHub</h1>
        <nav>Categories | Deals | Support</nav>
      </header>

      {/* PPR 境界: 動的コンテンツ推奨 */}
      <Suspense fallback={<div className="animate-pulse h-40 bg-gray-200" />}>
        <RecommendedProducts />
      </Suspense>
    </div>
  );
}

静的シェルが即座にレンダリングされ、動的コンテンツが Suspense 境界内で読み込まれます。
表示テキスト: Welcome to ShopHub | Categories | Deals | Support

// app/RecommendedProducts.tsx
import { unstable_cache as cache } from 'next/cache';

const getProducts = cache(
  async () => {
    return fetch('https://fakestoreapi.com/products?limit=4');
  },
  ['recommended-products'],
  { revalidate: 3600 }
);

export async function RecommendedProducts() {
  const products = await getProducts();
  return (
    <div className="grid grid-cols-4 gap-4 p-4">
      {products.map(p => (
        <div key={p.id} className="border rounded p-2">
          <img src={p.image} alt={p.title} className="h-32" />
          <p className="font-bold">{p.title}</p>
          <p>${p.price}</p>
        </div>
      ))}
    </div>
  );
}

ページ読み込み時の動作:
1. 静的ヘッダー（ナビゲーションバー）が即座に表示
2. 推奨エリアにスケルトンスクリーン（灰色プレースホルダーアニメーション）を表示
3. データ準備完了後、4 つの商品カードをストリーミングレンダリング
4. 同一ユーザーが 1 時間以内に再訪問した場合はキャッシュから提供、fetch 不要

上記の説明に従ってページがレンダリングされ、説明された動作に基づいて UI が更新されます。

// ============================================
// Server Action: フォーム送信が直接バックエンド関数を呼び出す
// API Route を手動で作成する必要なし
// ============================================

// app/contact/page.tsx
export default function ContactPage() {
  async function handleSubmit(formData) {
    'use server';
    const name = formData.get('name');
    const email = formData.get('email');
    // データベースに直接書き込むか、メールを送信
    console.log(`New contact: ${name} <${email}>`);
    // 成功ページにリダイレクト
    redirect('/contact/success');
  }

  return (
    <form action={handleSubmit}>
      <input name="name" placeholder="Your name" required />
      <input name="email" type="email" placeholder="Your email" required />
      <button type="submit">Send</button>
    </form>
  );
}

入力フィールドと送信ボタンのあるフォーム。
送信時、Server Action がデータを処理し、成功ページにリダイレクトします。

フォーム送信後の動作:
1. handleSubmit 関数がサーバー上で実行される
2. formData がフォームフィールドを自動収集
3. redirect がサーバー 303 リダイレクトを実行
4. API Route / fetch コードの記述不要

// ============================================
// 総合例: EC 商品詳細ページ
// 機能: SSG 静的ディレクトリ + PPR 推奨 + ISR コメント
// ============================================

// app/products/[id]/page.tsx
import { Suspense } from 'react';
import { notFound } from 'next/navigation';

// 静的ページパラメータ生成（ビルド時に事前生成）
export async function generateStaticParams() {
  const products = await fetch('https://fakestoreapi.com/products');
  const ids = await products.json();
  return ids.map(p => ({ id: String(p.id) }));
}

export default async function ProductPage({ params }) {
  const product = await fetch(
    `https://fakestoreapi.com/products/${params.id}`
  );

  if (!product) {
    notFound();
  }

  return (
    <div className="container mx-auto p-4">
      {/* 静的セクション: 基本商品情報 */}
      <div className="flex gap-8">
        <img src={product.image} alt={product.title} className="w-64 h-64" />
        <div>
          <h1 className="text-2xl font-bold">{product.title}</h1>
          <p className="text-xl text-green-600">${product.price}</p>
          <p className="mt-4">{product.description}</p>
        </div>
      </div>

      {/* PPR 動的境界: 推奨商品 */}
      <Suspense fallback={<div>Loading recommendations...</div>}>
        <Recommendations category={product.category} />
      </Suspense>

      {/* ISR コメントセクション: 毎時間再生成 */}
      <Suspense fallback={<div>Loading reviews...</div>}>
        <Reviews productId={params.id} />
      </Suspense>
    </div>
  );
}

// app/products/[id]/Recommendations.tsx
async function Recommendations({ category }) {
  const products = await fetch(
    `https://fakestoreapi.com/products/category/${category}`
  );
  return (
    <div className="mt-8">
      <h2 className="text-xl font-bold">推奨商品</h2>
      <div className="grid grid-cols-4 gap-4 mt-4">
        {products.slice(0, 4).map(p => (
          <div key={p.id} className="border p-2 rounded">{p.title}</div>
        ))}
      </div>
    </div>
  );
}

// app/products/[id]/Reviews.tsx
async function Reviews({ productId }) {
  const reviews = await fetch(
    `https://api.example.com/reviews/${productId}`,
    { next: { revalidate: 3600 } }
  );
  return (
    <div className="mt-8">
      <h2 className="text-xl font-bold">カスタマーレビュー</h2>
      {reviews.map(r => (
        <div key={r.id} className="border-b py-2">
          <p className="font-bold">{r.author}</p>
          <p>{r.content}</p>
        </div>
      ))}
    </div>
  );
}

1. 商品基本情報が即座に表示（SSG 静的 HTML）
2. 推奨エリアに「Loading recommendations...」プレースホルダーを表示
3. コメントセクションに「Loading reviews...」プレースホルダーを表示
4. 推奨コンテンツのストリーミングレンダリング（PPR）
5. キャッシュされたコメントコンテンツを 1 時間後に必要に応じて更新（ISR）
6. ページ全体に完全な SEO メタデータ