nextjs-validator

Next.js Validator

Next.js 16 の設定を検証し、非推奨の Next.js 14/15 のパターンを防止します。

有効になるタイミング

• 新しい Next.js プロジェクトをセットアップするとき
• Next.js の開発作業を始める前
• 既存の Next.js プロジェクトを監査するとき
• AI が Next.js のコードを生成した後
• CI/CD パイプラインの検証時

クイックスタート

python3 scripts/validate.py --root .
python3 scripts/validate.py --root . --strict

検証内容

1. パッケージのバージョン

// GOOD: v16+
"next": "^16.0.0"

// BAD: v15 or earlier
"next": "^15.0.0"

2. Proxy と Middleware

推奨 - Next.js 16：

// proxy.ts (Node.js runtime - REQUIRED)
import { createProxy } from 'next/proxy';
export const proxy = createProxy();

非推奨：

// middleware.ts (Edge runtime - DEPRECATED)
export function middleware() { }

3. App Router の構成

推奨：

app/
├── layout.tsx          # Root layout
├── page.tsx            # Home page
├── (routes)/           # Route groups
│   ├── dashboard/
│   │   └── page.tsx
│   └── settings/
│       └── page.tsx
└── api/                # API routes (optional)

非推奨 - Pages Router：

pages/
├── _app.tsx
├── index.tsx
└── api/

4. Cache Components と use cache

推奨 - Next.js 16：

// app/dashboard/page.tsx
'use cache';

export default async function Dashboard() {
  const data = await fetch('/api/data');
  return <DashboardView data={data} />;
}

5. Server Actions

推奨：

// app/actions.ts
'use server';

export async function createItem(formData: FormData) {
  // Server-side logic
}

6. Turbopack の設定

推奨 - Next.js 16 のデフォルト：

// next.config.ts (Turbopack is default, no config needed)

非推奨 - Turbopack を無効化：

// Don't disable unless absolutely necessary
experimental: {
  turbo: false  // BAD
}

7. 設定ファイルの形式

推奨 - TypeScript の設定：

// next.config.ts
import type { NextConfig } from 'next';

const config: NextConfig = {
  // ...
};

export default config;

非推奨 - JavaScript の設定：

// next.config.js - Prefer .ts
module.exports = { }

避けるべき非推奨パターン

非推奨（v15 以前）	置き換え先（v16 以降）
middleware.ts	proxy.ts
getServerSideProps	Server Components + use cache
getStaticProps	Server Components + use cache
getStaticPaths	generateStaticParams
_app.tsx	app/layout.tsx
_document.tsx	app/layout.tsx
pages/ directory	app/ directory
next/router	next/navigation
useRouter() (pages)	next/navigation からの useRouter()

使用するべき Next.js 16 の機能

Cache Components

'use cache';

// Entire component cached
export default async function CachedPage() {
  const data = await fetchData();
  return <View data={data} />;
}

部分的な事前レンダリング（PPR）

// next.config.ts
const config: NextConfig = {
  experimental: {
    ppr: true,
  },
};

Next.js DevTools MCP

コンテキストに応じた分析による、AI を活用したデバッグ：

// Enable in development
// Works with MCP-compatible agent tools

Parallel Routes

app/
├── @modal/
│   └── login/
│       └── page.tsx
├── @sidebar/
│   └── default.tsx
└── layout.tsx

Intercepting Routes

ディレクトリ構成については、references/full-guide.md（§ Intercepting Routes Example）を参照してください。

検証結果

レポートのサンプルについては、references/full-guide.md（§ Validation Output Example）を参照してください。

移行ガイド

middleware.ts → proxy.ts および getServerSideProps → Server Components の移行前後の例については、references/full-guide.md（§ Migration Guide）を参照してください。

CI/CD との統合

# .github/workflows/validate.yml
- name: Validate Next.js 16
  run: |
    python3 scripts/validate.py \
      --root . \
      --strict \
      --ci

統合

• tailwind-validator - Tailwind v4 の設定を検証
• biome-validator - Biome 2.3 以降の設定を検証
• clerk-validator - Clerk 認証のセットアップを検証