NodeJsをCloudflareで動かす

以下の手順で、@opennextjs/cloudflare を使った Next.js アプリの作成から Cloudflare Workers へのデプロイまでを進めていきます。既に

bash

npx create-next-app@latest sample-next-app-on-cf

まで実行済みとのことなので、その続きからスタートします。

プロジェクトディレクトリへ移動

bash

npx create-next-app@latest sample-next-app-on-cf
cd sample-next-app-on-cf

@opennextjs/cloudflare のインストール
bash
```
npm install @opennextjs/cloudflare@latest
```
OpenNext の Cloudflare 向けアダプターを追加します (opennext.js.org)。
Wrangler CLI のインストール
bash
```
npm install --save-dev wrangler@latest
```
デプロイに必須の Wrangler CLI を devDependency として追加します（バージョン 3.99.0 以上が必要） (opennext.js.org)。

wrangler.jsonc（または wrangler.toml）の作成 プロジェクトルートに以下の内容で wrangler.jsonc を作成します。

jsonc

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "main": ".open-next/worker.js",
  "name": "sample-next-app-on-cf",
  "compatibility_date": "2025-07-12",
  "compatibility_flags": [
    "nodejs_compat",
    "global_fetch_strictly_public"
  ],
  "assets": {
    "directory": ".open-next/assets",
    "binding": "ASSETS"
  },
  "services": [
    {
      "binding": "WORKER_SELF_REFERENCE",
      "service": "sample-next-app-on-cf"
    }
  ]
  // 必要に応じて R2 バケット設定を追加できます
}

main／assets はビルド出力先のワーカー用ファイル
compatibility_flags で Node.js API やグローバル fetch を有効化 (opennext.js.org)

open-next.config.ts の追加（オプション） キャッシュ設定などカスタマイズする場合、プロジェクトルートにファイルを置きます。

// open-next.config.ts
import { defineCloudflareConfig } from "@opennextjs/cloudflare";
import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";

export default defineCloudflareConfig({
  incrementalCache: r2IncrementalCache,
});

これで ISR（インクリメンタル再生成）が R2 バケットを使って動作します (opennext.js.org)。

ローカル開発用環境変数ファイルの作成NEXTJS_ENV=development を読み込むため、ルートに .dev.vars を作成：
```
NEXTJS_ENV=development
```
next dev 時に開発モード用の .env.development が読み込まれます (opennext.js.org)。

package.json のスクリプト更新scripts セクションを以下のように書き換えます：

jsonc

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

preview: ローカルで Workers ランタイムを模擬
deploy: ビルド→そのまま本番デプロイ (opennext.js.org)

静的アセットのキャッシュ設定public/_headers を作成し、最低限次を追加：
```
/_next/static/*
  Cache-Control: public,max-age=31536000,immutable
```
静的ファイルを長期キャッシュさせ、性能を高めます (opennext.js.org)。
不要な export const runtime = "edge" の削除@opennextjs/cloudflare ではまだ Edge ランタイム指定は不要／非対応のため、該当行があれば消しておきます (opennext.js.org)。
ビルド出力を無視する設定 リポジトリに成果物が混入しないよう、.gitignore に以下を追記：
```
.open-next/
```
(opennext.js.org)
ローカルでのプレビュー
bash
```
npm run preview
```
Workers ランタイム上での動作をそのままローカルで確認できます (opennext.js.org)。
本番デプロイ
bash
```
npm run deploy
```
成功すると https://sample-next-app-on-cf.<あなたのサブドメイン>.workers.dev で公開されます (opennext.js.org)。

以上で、@opennextjs/cloudflare を用いた Next.js アプリのサンプル作成・デプロイが完了です。Workers の無料枠（3 MB、1日10万リクエスト）を活かしつつ、静的アセットは KV/R2 経由で配信されるため効率的に運用できます。

NodeJsをCloudflareで動かす ​

NodeJsをCloudflareで動かす