【設定・環境構築】Next.js アプリを OpenNext で Cloudflare Workers にデプロイする

はじめに

Next.js は Vercel 向けに最適化されているため、Cloudflare Workers で直接動かすことはできません。しかし OpenNext というブリッジライブラリを使うと、Next.js のビルド出力を Workers 互換に変換してくれます。

この記事では anoni アプリ（Next.js 16 / App Router）を Cloudflare Workers に移行した際の手順とハマりポイントを紹介します。

この記事でわかること

• OpenNext (@opennextjs/cloudflare) の導入と設定方法

• wrangler.jsonc の書き方

• Workers 環境で fs モジュールが使えない問題の回避策

• useSearchParams() に Suspense 境界が必要な理由と対処

• ビルド → デプロイの流れ

対象読者

• Next.js App Router で開発中のアプリを Cloudflare Workers に載せたい方

• Vercel 以外のホスティングを検討している方

前提条件

• Next.js 15+ (App Router)

• Cloudflare アカウント + Workers 有効化

• wrangler CLI インストール済み

1. OpenNext の導入

OpenNext は Next.js を Cloudflare Workers 向けにビルドするブリッジです。

bun add @opennextjs/cloudflare wrangler

設定ファイルを作成します。

// open-next.config.ts
import { defineCloudflareConfig } from "@opennextjs/cloudflare";
export default defineCloudflareConfig({});

2. wrangler.jsonc の設定

{
  "name": "anoni-dev",
  "main": ".open-next/worker.js",
  "compatibility_date": "2025-02-26",
  "compatibility_flags": ["nodejs_compat_v2"],
  "assets": {
    "directory": ".open-next/assets",
    "binding": "ASSETS"
  }
}

3. fs モジュール問題の解決

キャラクタープロンプト（.md ファイル）を fs.readFileSync で読んでいた箇所がエラーになります。解決策は TypeScript の定数ファイルに変換して埋め込むことです。

// src/lib/prompts.ts
const PROMPTS: Record<string, string> = {
  "akari.md": `ここにプロンプト内容...`,
  "haruto.md": `ここにプロンプト内容...`,
};

export function getPrompt(fileName: string): string {
  const content = PROMPTS[fileName];
  if (!content) throw new Error(`Prompt not found: ${fileName}`);
  return content;
}

4. Suspense 境界の追加

Workers SSR 環境では useSearchParams() を使うコンポーネントに Suspense 境界が必須です。

import { Suspense } from "react";

export default function ChatPage() {
  return (
    <>
      <Suspense>
        <WelcomeToast />
      </Suspense>
      <ChatPageContainer />
    </>
  );
}

5. ビルドとデプロイ

# Workers 向けビルド
npx opennextjs-cloudflare build

# デプロイ
npx wrangler deploy

Tips

まとめ

• OpenNext (@opennextjs/cloudflare) を使えば Next.js App Router アプリを Workers にデプロイ可能

• fs が使えない制約は、ファイル内容を TS 定数に変換して解決

• useSearchParams() には Suspense 境界を忘れずに

• nodejs_compat_v2 フラグで Node.js API の一部がポリフィルされる