next16-expert

⚡ スキル：next16-expert

説明

Next.js 16.1.1 と React 19.2 のエコシステムにおけるシニアスペシャリストです。このスキルでは、高パフォーマンスな Proxy & Cache のパラダイム、部分的なプリレンダリング（PPR）、および middleware.ts から proxy.ts への必須の移行に焦点を当てています。最新のフルスタック開発向けに、本番環境ですぐに使えるパターンを提供します。

目次

1. クイックスタート
2. Proxy 革命（proxy.ts）
3. 統合キャッシュ（use cache）
4. React 19.2 のパターン
5. データ取得と変更
6. コンポーネント設計と単一責任
7. 「禁止事項」リスト（アンチパターン）
8. 高度なリファレンス

---

クイックスタート

エリート品質のプロジェクトを初期化します。

npx create-next-app@latest my-elite-app \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*"

エリート設定（next.config.ts）：

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  experimental: {
    ppr: true, // Enable Partial Pre-rendering
    dynamicIO: true, // New IO optimization for Next.js 16
    reactCompiler: true, // Stable React Compiler support
  },
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

export default nextConfig;

---

Proxy 革命（proxy.ts）

Next.js 16 では、middleware.ts はレガシーです。すべてのグローバルなネットワーク処理は proxy.ts に配置する必要があります。これによりランタイムが安定し、すべてのリクエストを適切に制御できます。

標準的なエリート Proxy（src/app/proxy.ts）：

import { nextProxy } from 'next/server';

export default nextProxy(async (request) => {
  const url = request.nextUrl;

  // Global Routing Logic
  if (url.pathname.startsWith('/api/v1')) {
    // Standardize API versioning at the proxy level
  }

  // Security Headers & Request Decoration
  request.headers.set('X-Elite-Engine', '16.1.1');
  
  const response = await fetch(request);

  // Performance Monitoring
  response.headers.set('Server-Timing', 'elite;dur=20');

  return response;
});

A/B テストや高度なセキュリティについて詳しくは、proxy-deep-dive.md を参照してください。

---

統合キャッシュ（use cache）

Next.js 16 では use cache ディレクティブが導入され、revalidatePath の複雑さを、関数単位の明示的なキャッシュに置き換えられます。

キャッシュされたデータサービス（src/services/data.ts）：

import { cacheLife, cacheTag } from 'next/cache';

export async function getGlobalMetrics() {
  'use cache';
  cacheLife(60); // Cache for 60 seconds
  cacheTag('metrics');

  const data = await fetch('https://api.internal/metrics').then(r => r.json());
  return data;
}

無効化のパターン：

• revalidateTag('metrics')：即時にパージします。
• updateTag('metrics')：推奨。古いデータとしてマークし、バックグラウンドで再検証します（SWR）。

複雑なキャッシュ戦略については、unified-caching.md を参照してください。

---

React 19.2 のパターン

Next.js 16 で React 19.2 の安定性を活用し、定型コードをなくします。

1. フォームでの useActionState

クライアントコンポーネントで、手動によるローディング状態やエラー状態の管理をなくします。

'use client';
import { useActionState } from 'react';
import { signUpAction } from '@/actions/auth';

export function SignUpForm() {
  const [state, action, isPending] = useActionState(signUpAction, null);

  return (
    <form action={action}>
      <input name="email" type="email" required />
      {state?.errors?.email && <p className="text-red-500">{state.errors.email}</p>}
      
      <button disabled={isPending}>
        {isPending ? 'Processing...' : 'Sign Up'}
      </button>
    </form>
  );
}

2. <Activity /> コンポーネント

パフォーマンスコストをかけずに、バックグラウンドのタブや非表示の UI をプリレンダリングするために使用します。

import { Activity } from 'react';

export function TabSystem({ activeTab }) {
  return (
    <>
      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
        <HomeTab />
      </Activity>
      <Activity mode={activeTab === 'settings' ? 'visible' : 'hidden'}>
        <SettingsTab />
      </Activity>
    </>
  );
}

---

データ取得と変更

サーバーファーストのアプローチ（RSC）

データの 80% はサーバーコンポーネントで取得してください。

// app/dashboard/page.tsx
import { getGlobalMetrics } from '@/services/data';

export default async function Page() {
  const metrics = await getGlobalMetrics(); // Direct, cached call

  return (
    <div>
      <h1>Dashboard</h1>
      <pre>{JSON.stringify(metrics, null, 2)}</pre>
    </div>
  );
}

サーバーアクション（変更処理）

すべての POST/PATCH/DELETE 操作で必須です。

// actions/auth.ts
'use server';
import { updateTag } from 'next/cache';

export async function signUpAction(prevState: any, formData: FormData) {
  const email = formData.get('email');
  
  try {
    await db.user.create({ data: { email } });
    updateTag('users'); // Background revalidation
    return { success: true };
  } catch (e) {
    return { errors: { email: 'Invalid email' } };
  }
}

---

コンポーネント設計と単一責任

• 300 行ルール：コンポーネントのファイルは 300 行未満にしてください。これを超える場合は、サブコンポーネントを抽出するか、ロジックを hooks/ または services/ に移してください。
• ハイドレーションガード：ブラウザー専用の状態に依存するコンポーネントは、必ず保護してください。

'use client';
import { useState, useEffect } from 'react';

export function SafeClientComponent({ children }) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  if (!mounted) return <div className="animate-pulse" />; // Placeholder
  return <>{children}</>;
}

---

「禁止事項」リスト（アンチパターン）

• middleware.ts は使用しないでください：proxy.ts を使用してください。Next.js 16 では middleware.ts はレガシーと見なされ、パフォーマンスも劣ります。
• 単純な UI 更新に revalidatePath を使用しないでください：Server Actions 内で updateTag を使用すると、より優れた UX（Stale-While-Revalidate）が得られます。
• Suspense を使わずに RSC から Cookie にアクセスしないでください：cookies() または headers() にアクセスすると、ルートが動的になります。依存するコンポーネントを <Suspense> でラップし、ページの残りの部分を静的に保ってください（PPR）。
• コンポーネントにバレルファイル（index.ts）を使用しないでください：ツリーシェイキングが無効になり、バンドルが肥大化します。コンポーネントファイルから直接インポートしてください。
• API URL をハードコードしないでください：環境の管理には、環境変数と proxy.ts レイヤーを使用してください。

---

高度なリファレンス

• Proxy の詳細 — 高度なルーティングとセキュリティ。
• 統合キャッシュ — use cache ディレクティブを使いこなします。
• React エキスパート — 高度なパフォーマンス最適化について。
• Supabase エキスパート — バックエンドと認証の統合について。

---

Next.js 16.1.1 と React 19.2 向けに最適化されています。更新日：2026 年 1 月 22 日 - 14:36