はじめに

これまでポートフォリオサイトはCloudflare Pagesで運用していましたが、最近Cloudflare Workers＋open-next構成へ移行しました。 本記事では、移行の背景・手順・ポイントをまとめます。

Cloudflare公式: Next.js with OpenNext
developers.cloudflare.com

なぜCloudflare Workers＋open-nextへ

Cloudflare Workers＋open-nextへ移行したのは、まずSSR（サーバーサイドレンダリング）や動的ルーティングといった機能を試したかったからです。従来のCloudflare PagesはSSGが中心で、柔軟性に欠ける場面がありました。

しかし、open-nextがCloudflare公式で事実上の標準となり、Workersへのデプロイが簡単になり、移行を決断しました。

open-nextとは？

open-next (GitHub)
github.com

open-nextは、Next.jsアプリをCloudflare WorkersやPages、その他のエッジ環境向けに最適化してデプロイできるOSSです。

App RouterやPages Router、Route Handlers、SSR、ISR、SSG、Server Actions、Middlewareなど、主要なNext.jsの機能がサポートされています。また、Composable Cachingなど実験的にサポートされているものもあるようです。

セットアップ・移行手順

1. 新規プロジェクト作成（推奨）

Cloudflare公式CLIでNext.js＋Workers＋open-next構成を下記の通り、一発作成可能です。

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

ですが、今回は既存のNext.jsプロジェクトをCloudflare Workers＋open-nextに移行しました。

2. 既存プロジェクトをCloudflare Workers＋open-next化

npm i @opennextjs/cloudflare@latest
npm i -D wrangler@latest

プロジェクトルートに wrangler.toml または wrangler.jsonc を作成

main = ".open-next/worker.js"
name = "my-app"
compatibility_date = "2025-03-25"
compatibility_flags = ["nodejs_compat"]
[assets]
directory = ".open-next/assets"
binding = "ASSETS"

open-next.config.ts を作成（キャッシュ等の詳細設定もここで可能）

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

export default defineCloudflareConfig();

package.json にスクリプト追加

"preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
"deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy"

3. ローカル開発

npm run dev でNode.js上のNext.js開発サーバ、npm run preview でCloudflare Workersランタイムによる本番同等の挙動を確認できます。

npm run dev
npm run preview

4. デプロイ

npm run deploy でCloudflare Workersへデプロイできます。

npm run deploy

ハマりどころ・注意点

そもそも、動作環境がNode.jsとエッジ環境で異なるため、Node.jsのAPIが使えない点に注意が必要です。特に、ファイルシステムや一部のグローバルオブジェクトは利用できません。

また私の場合、Next.jsのParallel Routes / Intercept Routes を使ってダイアログ表示しようと思ったのですが、正常動作しない問題に遭遇しました。

結局解決はできてないのですが、同様の症状が発生している例はあるようです。

Fix: react resolution for interception, parallel and group routes (PR #155)

それ以外にもopen-nextのバージョンやNext.jsのバージョン互換性には注意が必要です。環境変数も、Cloudflare Workers用に見直す必要があります。

まとめ

Cloudflare Workers＋open-next構成により、Next.jsの最新機能を活かしつつ、エッジでの高速配信・柔軟な運用が可能になりました。今後も運用しながら改善していきます。

ではまた。