cloudflare-nextjs

Cloudflare Next.js デプロイ用スキル

OpenNext Cloudflare アダプターを使用して、Next.js アプリケーションを Cloudflare Workers にデプロイし、本番運用に対応したサーバーレスの Next.js ホスティングを実現します。

このスキルを使う場面

• Next.js アプリケーション（App Router または Pages Router）を Cloudflare Workers にデプロイする場合
• Cloudflare でサーバーサイドレンダリング（SSR）、静的サイト生成（SSG）、または段階的静的再生成（ISR）が必要な場合
• 既存の Next.js アプリを Vercel、AWS、または他のプラットフォームから Cloudflare に移行する場合
• Cloudflare サービス（D1、R2、KV、Workers AI）を使ってフルスタックの Next.js アプリケーションを構築する場合
• Workers で React Server Components、Server Actions、または Next.js ミドルウェアが必要な場合
• Cloudflare のネットワークを活用したグローバルなエッジデプロイを行いたい場合

主要な概念

OpenNext アダプターのアーキテクチャ

OpenNext Cloudflare アダプター（@opennextjs/cloudflare）は、Next.js のビルド出力を Cloudflare Worker 互換の形式に変換します。これは一般的な Next.js デプロイとは根本的に異なります。

• Node.js ランタイムが必須：Workers で Node.js ランタイムを使用します（Edge ランタイムではありません）
• 2 種類の開発ワークフロー：Next.js 開発サーバーと workerd ランタイムの両方でテストします
• カスタムビルドパイプライン：next build → OpenNext による変換 → Worker のデプロイ
• Cloudflare 固有の設定：wrangler.jsonc と open-next.config.ts が必要です

一般的な Next.js との主な違い

項目	一般的な Next.js	Cloudflare Workers
ランタイム	Node.js または Edge	Node.js（nodejs_compat 経由）
開発サーバー	next dev	next dev + opennextjs-cloudflare preview
デプロイ	プラットフォーム固有	opennextjs-cloudflare deploy
Worker のサイズ	制限なし	3 MiB（無料）／10 MiB（有料）
データベース接続	グローバルクライアントを使用可能	リクエストごとにスコープする必要があります
画像の最適化	組み込み	Cloudflare Images 経由
キャッシュ	Next.js キャッシュ	OpenNext 設定 + Workers キャッシュ

セットアップのパターン

新規プロジェクトのセットアップ

Cloudflare の create-cloudflare（C3）CLI を使い、Workers 向けに事前設定された新しい Next.js プロジェクトをひな形から作成します。

npm create cloudflare@latest -- my-next-app --framework=next

実行内容：

1. Next.js 公式セットアップツール（create-next-app）を実行します
2. @opennextjs/cloudflare アダプターをインストールします
3. 正しい設定を含む wrangler.jsonc を作成します
4. キャッシュ設定用の open-next.config.ts を作成します
5. package.json にデプロイスクリプトを追加します
6. Cloudflare への即時デプロイを任意で実行します

開発ワークフロー：

npm run dev      # Next.js dev server (fast reloads)
npm run preview  # Test in workerd runtime (production-like)
npm run deploy   # Build and deploy to Cloudflare

既存プロジェクトの移行

既存の Next.js アプリケーションに OpenNext アダプターを追加するには、次の手順に従います。

1. アダプターをインストールする

npm install --save-dev @opennextjs/cloudflare

2. wrangler.jsonc を作成する

{
  "name": "my-next-app",
  "compatibility_date": "2025-05-05",
  "compatibility_flags": ["nodejs_compat"]
}

重要な設定：

• compatibility_date：2025-05-05 以降が必須（FinalizationRegistry のサポートに必要）
• compatibility_flags：nodejs_compat を含める必要があります（Node.js ランタイムに必要）

3. open-next.config.ts を作成する

import { defineCloudflareConfig } from "@opennextjs/cloudflare";

export default defineCloudflareConfig({
  // Caching configuration (optional)
  // See: https://opennext.js.org/cloudflare/caching
});

4. package.json のスクリプトを更新する

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
    "deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
    "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
  }
}

各スクリプトの用途：

• dev：Next.js 開発サーバー（素早い反復開発用）
• preview：ビルド後、workerd ランタイムで実行します（デプロイ前のテスト用）
• deploy：ビルドして Cloudflare にデプロイします
• cf-typegen：Cloudflare バインディング用の TypeScript 型を生成します

5. Node.js ランタイムを使用する（Edge ではなく）

アプリから Edge ランタイムのエクスポートを削除します。

// ❌ REMOVE THIS (Edge runtime not supported)
export const runtime = "edge";

// ✅ Use Node.js runtime (default)
// No export needed - Node.js is default

開発ワークフロー

2 種類の環境でのテスト戦略

必ず両方の環境でテストしてください。

1. Next.js 開発サーバー（npm run dev）

   • ホットリロードが高速です
   • 開発者にとって最も快適な環境です
   • Node.js で実行されます（本番ランタイムではありません）
   • 素早い反復開発に使います

2. Workerd ランタイム（npm run preview）

   • 本番環境に近い環境で実行されます
   • ランタイム固有の問題を検出できます
   • 再ビルドに時間がかかります
   • デプロイ前に必ず実行してください

それぞれの使いどころ

# Iterating on UI/logic → Use Next.js dev server
npm run dev

# Testing integrations (D1, R2, KV) → Use preview
npm run preview

# Before deploying → ALWAYS test preview
npm run preview

# Deploy to production
npm run deploy

設定要件

Wrangler の設定

wrangler.jsonc の最低限の要件：

{
  "name": "your-app-name",
  "compatibility_date": "2025-05-05",  // Minimum for FinalizationRegistry
  "compatibility_flags": ["nodejs_compat"]  // Required for Node.js runtime
}

パッケージのエクスポートに関する環境変数

複数のエクスポート条件を持つ npm パッケージを使用する場合は、.env を作成します。

WRANGLER_BUILD_CONDITIONS=""
WRANGLER_BUILD_PLATFORM="node"

これにより、利用可能な場合に Wrangler が node エクスポートを優先するようになります。

Cloudflare バインディングの統合

wrangler.jsonc にバインディングを追加します。

{
  "name": "your-app-name",
  "compatibility_date": "2025-05-05",
  "compatibility_flags": ["nodejs_compat"],

  // D1 Database
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "production-db",
      "database_id": "your-database-id"
    }
  ],

  // R2 Storage
  "r2_buckets": [
    {
      "binding": "BUCKET",
      "bucket_name": "your-bucket"
    }
  ],

  // KV Storage
  "kv_namespaces": [
    {
      "binding": "KV",
      "id": "your-kv-id"
    }
  ],

  // Workers AI
  "ai": {
    "binding": "AI"
  }
}

Next.js では process.env を介してバインディングにアクセスします。

// app/api/route.ts
import type { NextRequest } from 'next/server';

export async function GET(request: NextRequest) {
  // Access Cloudflare bindings
  const env = process.env as any;

  // D1 Database query
  const result = await env.DB.prepare('SELECT * FROM users').all();

  // R2 Storage access
  const file = await env.BUCKET.get('file.txt');

  // KV Storage access
  const value = await env.KV.get('key');

  // Workers AI inference
  const response = await env.AI.run('@cf/meta/llama-3-8b-instruct', {
    prompt: 'Hello AI'
  });

  return Response.json({ result });
}

エラーの防止（10 件以上のエラーを記録）

1. Worker サイズ制限超過（無料プランでは 3 MiB）

エラー: "Your Worker exceeded the size limit of 3 MiB"

原因: Workers の無料プランでは、Worker のサイズが 3 MiB（gzip 圧縮時）に制限されています。

解決策:

• Workers の有料プランにアップグレードする（上限 10 MiB）
• バンドルサイズを分析し、使用していない依存関係を削除する
• 動的インポートを使用して、大きな依存関係をコード分割する

バンドルの分析:

npx opennextjs-cloudflare build
cd .open-next/server-functions/default
# Analyze handler.mjs.meta.json with ESBuild Bundle Analyzer

参照元: https://opennext.js.org/cloudflare/troubleshooting#worker-size-limits

---

2. Worker サイズ制限超過（有料プランでは 10 MiB）

エラー: "Your Worker exceeded the size limit of 10 MiB"

原因: 不要なコードが Worker にバンドルされています。

デバッグの手順:

1. npx opennextjs-cloudflare build を実行します。
2. .open-next/server-functions/default に移動します。
3. ESBuild Bundle Analyzer を使用して handler.mjs.meta.json を分析します。
4. 大きな依存関係を特定し、削除するか外部化します。

参照元: https://opennext.js.org/cloudflare/troubleshooting#worker-size-limits

---

3. FinalizationRegistry が定義されていない

エラー: "ReferenceError: FinalizationRegistry is not defined"

原因: wrangler.jsonc の compatibility_date が古すぎます。

解決策: compatibility_date を 2025-05-05 以降に更新します。

{
  "compatibility_date": "2025-05-05"  // Minimum for FinalizationRegistry
}

参照元: https://opennext.js.org/cloudflare/troubleshooting#finalizationregistry-is-not-defined

---

4. 別のリクエストに代わって I/O を実行できない

エラー: "Cannot perform I/O on behalf of a different request"

原因: データベースクライアントがグローバルに作成され、複数のリクエスト間で再利用されています。

問題のあるコード:

// ❌ WRONG: Global DB client
import { Pool } from 'pg';
const pool = new Pool({ connectionString: process.env.DATABASE_URL });

export async function GET() {
  // This will fail - pool created in different request context
  const result = await pool.query('SELECT * FROM users');
  return Response.json(result);
}

解決策: リクエストハンドラー内でデータベースクライアントを作成します。

// ✅ CORRECT: Request-scoped DB client
import { Pool } from 'pg';

export async function GET() {
  // Create client within request context
  const pool = new Pool({ connectionString: process.env.DATABASE_URL });
  const result = await pool.query('SELECT * FROM users');
  await pool.end();
  return Response.json(result);
}

代替策: 外部データベースの代わりに、Workers 向けに設計された Cloudflare D1 を使用します。

// ✅ BEST: Use D1 (no connection pooling needed)
export async function GET(request: NextRequest) {
  const env = process.env as any;
  const result = await env.DB.prepare('SELECT * FROM users').all();
  return Response.json(result);
}

参照元: https://opennext.js.org/cloudflare/troubleshooting#cannot-perform-io-on-behalf-of-a-different-request

---

5. NPM パッケージのインポート失敗

エラー: "Could not resolve '<package>'"

原因: nodejs_compat フラグまたはパッケージのエクスポート条件がありません。

解決策 1: nodejs_compat フラグを有効にします。

{
  "compatibility_flags": ["nodejs_compat"]
}

解決策 2: 複数のエクスポートを持つパッケージの場合は、.env を作成します。

WRANGLER_BUILD_CONDITIONS=""
WRANGLER_BUILD_PLATFORM="node"

参照元: https://opennext.js.org/cloudflare/troubleshooting#npm-packages-fail-to-import

---

6. チャンクの読み込みに失敗する（Turbopack）

エラー: "Failed to load chunk server/chunks/ssr/"

原因: Next.js が Turbopack（next build --turbo）でビルドされています。

解決策: 標準のビルドを使用します（アダプターは Turbopack をサポートしていません）。

{
  "scripts": {
    "build": "next build"  // ✅ Correct
    // "build": "next build --turbo"  // ❌ Don't use Turbopack
  }
}

参照元: https://opennext.js.org/cloudflare/troubleshooting#failed-to-load-chunk

---

7. SSRF の脆弱性（CVE-2025-6087）

脆弱性: /_next/image エンドポイントを介したサーバーサイドリクエストフォージェリ

影響を受けるバージョン: @opennextjs/cloudflare < 1.3.0

解決策: バージョン 1.3.0 以降にアップグレードします。

npm install --save-dev @opennextjs/cloudflare@^1.3.0

影響: 認証されていないユーザーが、任意のリモートコンテンツをプロキシできるようになります。

参照元: https://github.com/advisories/GHSA-rvpw-p7vw-wj3m

---

8. Durable Objects バインディングに関する警告

警告: "You have defined bindings to the following internal Durable Objects... will not work in local development, but they should work in production"

原因: OpenNext はキャッシュに Durable Objects（DOQueueHandler、DOShardedTagCache）を使用しています。

解決策: 無視しても問題ありません — この警告は想定どおりの動作です。

代替策（警告を抑制する場合）: 独自の設定を持つ別の Worker で Durable Objects を定義します。

参照元: https://opennext.js.org/cloudflare/known-issues#caching-durable-objects

---

9. Prisma と D1 のミドルウェアの競合

エラー：Next.js ミドルウェアで @prisma/client と @prisma/adapter-d1 を使用すると、ビルドエラーが発生します

原因：ミドルウェアのコンテキストでデータベースを初期化しています

回避策：Prisma クライアントはミドルウェアではなく、ルートハンドラーで初期化してください

ソース：https://github.com/opennextjs/opennextjs-cloudflare/issues/471

---

10. cross-fetch ライブラリのエラー

エラー：cross-fetch に依存するライブラリを使用すると、エラーが発生します

原因：OpenNext がデプロイパッケージにパッチを適用するため、ネイティブの fetch が利用できる場合でも、cross-fetch が Node.js のライブラリを使用しようとします

解決策：cross-fetch ではなく、ネイティブの fetch API を直接使用してください。

// ✅ Use native fetch
const response = await fetch('https://api.example.com/data');

// ❌ Avoid cross-fetch
// import fetch from 'cross-fetch';

ソース：https://opennext.js.org/cloudflare/troubleshooting

---

11. Windows での開発に関する問題

問題：Windows の完全なサポートは保証されていません

原因：Windows 上の Next.js ツールに起因する問題です

解決策：

• WSL（Windows Subsystem for Linux）を使用する
• Linux を搭載した仮想マシンを使用する
• デプロイには Linux ベースの CI/CD を使用する

ソース：https://opennext.js.org/cloudflare#windows-support

機能のサポート状況

機能	状況	備考
App Router	✅ 完全サポート	最新の App Router 機能が動作します
Pages Router	✅ 完全サポート	従来の Pages Router に対応しています
Route Handlers	✅ 完全サポート	API ルートは想定どおりに動作します
React Server Components	✅ 完全サポート	RSC が完全に機能します
Server Actions	✅ 完全サポート	Server Actions が動作します
SSG	✅ 完全サポート	静的サイト生成
SSR	✅ 完全サポート	サーバーサイドレンダリング
ISR	✅ 完全サポート	増分静的再生成
Middleware	✅ サポート	Node.js ミドルウェア（15.2+）を除く
Image Optimization	✅ サポート	Cloudflare Images 経由
Partial Prerendering (PPR)	✅ サポート	Next.js では実験的機能です
Composable Caching	✅ サポート	'use cache' ディレクティブ
Response Streaming	✅ サポート	ストリーミングレスポンスが動作します
next/after API	✅ サポート	レスポンス送信後の非同期処理
Node.js Middleware (15.2+)	❌ 未サポート	今後のサポートを予定しています
Edge Runtime	❌ 未サポート	Node.js ランタイムを使用してください

ソース：https://developers.cloudflare.com/workers/framework-guides/web-apps/nextjs/#next-js-supported-features

Cloudflare サービスとの統合

D1 データベース（SQL）

// app/api/users/route.ts
import type { NextRequest } from 'next/server';

export async function GET(request: NextRequest) {
  const env = process.env as any;

  const result = await env.DB.prepare(
    'SELECT * FROM users WHERE active = ?'
  ).bind(true).all();

  return Response.json(result.results);
}

export async function POST(request: NextRequest) {
  const env = process.env as any;
  const { name, email } = await request.json();

  const result = await env.DB.prepare(
    'INSERT INTO users (name, email) VALUES (?, ?)'
  ).bind(name, email).run();

  return Response.json({ id: result.meta.last_row_id });
}

Wrangler の設定：

{
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "production-db",
      "database_id": "your-database-id"
    }
  ]
}

関連項目：D1 のパターンについて詳しくは cloudflare-d1 スキルを参照してください

---

R2 ストレージ（オブジェクトストレージ）

// app/api/upload/route.ts
import type { NextRequest } from 'next/server';

export async function POST(request: NextRequest) {
  const env = process.env as any;
  const formData = await request.formData();
  const file = formData.get('file') as File;

  // Upload to R2
  await env.BUCKET.put(file.name, file.stream(), {
    httpMetadata: {
      contentType: file.type
    }
  });

  return Response.json({ success: true, filename: file.name });
}

export async function GET(request: NextRequest) {
  const env = process.env as any;
  const { searchParams } = new URL(request.url);
  const filename = searchParams.get('file');

  const object = await env.BUCKET.get(filename);
  if (!object) {
    return new Response('Not found', { status: 404 });
  }

  return new Response(object.body, {
    headers: {
      'Content-Type': object.httpMetadata?.contentType || 'application/octet-stream'
    }
  });
}

関連項目：R2 のパターンについて詳しくは cloudflare-r2 スキルを参照してください

---

Workers AI（モデル推論）

// app/api/ai/route.ts
import type { NextRequest } from 'next/server';

export async function POST(request: NextRequest) {
  const env = process.env as any;
  const { prompt } = await request.json();

  const response = await env.AI.run('@cf/meta/llama-3-8b-instruct', {
    prompt
  });

  return Response.json(response);
}

Wrangler の設定：

{
  "ai": {
    "binding": "AI"
  }
}

関連項目：AI のパターンについて詳しくは cloudflare-workers-ai スキルを参照してください

---

KV ストレージ（キーと値）

// app/api/cache/route.ts
import type { NextRequest } from 'next/server';

export async function GET(request: NextRequest) {
  const env = process.env as any;
  const { searchParams } = new URL(request.url);
  const key = searchParams.get('key');

  const value = await env.KV.get(key);
  return Response.json({ key, value });
}

export async function PUT(request: NextRequest) {
  const env = process.env as any;
  const { key, value, ttl } = await request.json();

  await env.KV.put(key, value, { expirationTtl: ttl });
  return Response.json({ success: true });
}

関連項目：KV のパターンについて詳しくは cloudflare-kv スキルを参照してください

画像最適化

Next.js の画像最適化は Cloudflare Images を通じて機能します。open-next.config.ts で設定してください。

import { defineCloudflareConfig } from "@opennextjs/cloudflare";

export default defineCloudflareConfig({
  imageOptimization: {
    loader: 'cloudflare'
  }
});

コンポーネントでの使用方法：

import Image from 'next/image';

export default function Avatar() {
  return (
    <Image
      src="/avatar.jpg"
      alt="User avatar"
      width={200}
      height={200}
      // Automatically optimized via Cloudflare Images
    />
  );
}

課金：Cloudflare Images の使用料金は別途請求されます

ドキュメント：https://developers.cloudflare.com/images/

キャッシュ設定

open-next.config.ts でキャッシュの動作を設定してください。

import { defineCloudflareConfig } from "@opennextjs/cloudflare";

export default defineCloudflareConfig({
  // Custom cache configuration
  cache: {
    // Override default cache behavior
    // See: https://opennext.js.org/cloudflare/caching
  }
});

デフォルトの動作：OpenNext は適切なデフォルトのキャッシュ設定を提供します

高度な使い方：OpenNext の公式キャッシュドキュメントを参照してください

既知の制限事項

未サポートの機能

1. Node.js Middleware（Next.js 15.2+）

   • Next.js 15.2 で導入されました
   • 今後のリリースでサポートを予定しています
   • 現時点では標準のミドルウェアを使用してください

2. Edge Runtime

   • Node.js ランタイムのみサポートされています
   • アプリから export const runtime = "edge" を削除してください

3. Windows の完全なサポート

   • Windows での開発は完全には保証されていません
   • WSL、仮想マシン、または Linux ベースの CI/CD を使用してください

ワーカーのサイズ制限

• 無料プラン：3 MiB 制限（gzip 圧縮時）
• 有料プラン：10 MiB 制限（gzip 圧縮時）
• 開発中はバンドルサイズを監視してください
• コード分割には動的インポートを使用してください

データベース接続

• 外部データベースクライアント（PostgreSQL、MySQL）はリクエスト単位で作成する必要があります
• リクエスト間で接続を再利用することはできません（Workers の制限）
• データベースには Cloudflare D1 を推奨します（Workers 向けに設計されています）

デプロイ

ローカルマシンからデプロイする

# Build and deploy in one command
npm run deploy

# Or step by step:
npx opennextjs-cloudflare build
npx opennextjs-cloudflare deploy

CI/CD からデプロイする

CI/CD システムでデプロイコマンドを設定します。

npm run deploy

例：

• GitHub Actions：.github/workflows/deploy.yml
• GitLab CI：.gitlab-ci.yml
• Cloudflare Workers Builds：npm run deploy を自動検出します

環境変数：Cloudflare ダッシュボードまたは CI/CD システムでシークレットを設定します

カスタムドメイン

Cloudflare ダッシュボードでカスタムドメインを追加します。

1. Workers & Pages に移動します
2. Worker を選択します
3. Settings → Domains & Routes に移動します
4. カスタムドメインを追加します

DNS：ドメインが Cloudflare 上にある必要があります（ゾーンが必要です）

TypeScript のサポート

Cloudflare バインディングの型を生成します。

npm run cf-typegen

バインディングの型を含む cloudflare-env.d.ts が作成されます。

// cloudflare-env.d.ts (auto-generated)
interface CloudflareEnv {
  DB: D1Database;
  BUCKET: R2Bucket;
  KV: KVNamespace;
  AI: Ai;
}

ルートハンドラーで使用します。

import type { NextRequest } from 'next/server';

export async function GET(request: NextRequest) {
  const env = process.env as CloudflareEnv;
  // Now env.DB, env.BUCKET, etc. are typed
}

テスト

ローカルテスト（開発）

# Next.js dev server (fast iteration)
npm run dev

ローカルテスト（本番環境に近い状態）

# Workerd runtime (catches Workers-specific issues)
npm run preview

統合テスト

デプロイ前に必ず preview モードでテストしてください。

# Build and run in workerd
npm run preview

# Test bindings (D1, R2, KV, AI)
# Test middleware
# Test API routes
# Test SSR/ISR behavior

他のプラットフォームからの移行

Vercel からの移行

1. 既存の Next.js プロジェクトをコピーします
2. 既存プロジェクトの移行手順（上記）を実行します
3. Cloudflare ダッシュボードで環境変数を更新します
4. Vercel 固有の機能を置き換えます。
   • Vercel Postgres → Cloudflare D1
   • Vercel Blob → Cloudflare R2
   • Vercel KV → Cloudflare KV
   • Vercel Edge Config → Cloudflare KV
5. npm run preview で十分にテストします
6. npm run deploy でデプロイします

AWS／その他のプラットフォームからの移行

Vercel からの移行と同じ手順です。アダプターが Next.js の標準機能を自動的に処理します。

リソース

公式ドキュメント

• OpenNext Cloudflare：https://opennext.js.org/cloudflare
• Cloudflare Next.js ガイド：https://developers.cloudflare.com/workers/framework-guides/web-apps/nextjs/
• Next.js ドキュメント：https://nextjs.org/docs

トラブルシューティング

• トラブルシューティングガイド：https://opennext.js.org/cloudflare/troubleshooting
• 既知の問題：https://opennext.js.org/cloudflare/known-issues
• GitHub の問題：https://github.com/opennextjs/opennextjs-cloudflare/issues

関連スキル

• cloudflare-worker-base - Hono + Vite + React を使用した Worker の基本設定
• cloudflare-d1 - D1 データベースの統合
• cloudflare-r2 - R2 オブジェクトストレージ
• cloudflare-kv - KV キーバリューストレージ
• cloudflare-workers-ai - Workers AI の統合
• cloudflare-vectorize - RAG 向けベクトルデータベース

クイックリファレンス

基本コマンド

# New project
npm create cloudflare@latest -- my-next-app --framework=next

# Development
npm run dev      # Fast iteration (Next.js dev server)
npm run preview  # Test in workerd (production-like)

# Deployment
npm run deploy   # Build and deploy to Cloudflare

# TypeScript
npm run cf-typegen  # Generate binding types

重要な設定

// wrangler.jsonc
{
  "compatibility_date": "2025-05-05",  // Minimum!
  "compatibility_flags": ["nodejs_compat"]  // Required!
}

よくある落とし穴

1. ❌ Edge runtime を使用する → ✅ Node.js runtime を使用する
2. ❌ グローバルな DB クライアント → ✅ リクエスト単位のクライアント
3. ❌ 古い compatibility_date → ✅ 2025-05-05 以降を使用する
4. ❌ nodejs_compat がない → ✅ compatibility_flags に追加する
5. ❌ dev でしかテストしない → ✅ デプロイ前に必ず preview でテストする
6. ❌ Turbopack を使用する → ✅ 標準の Next.js ビルドを使用する

---

本番環境でのテスト済み：Cloudflare の公式サポートと活発なコミュニティ トークン削減：手動設定と比べて約 59% 防止できるエラー：文書化された問題が 10 件以上 最終確認日：2025-10-21