Vercel なしで個人開発：Next.js + OpenNext + Cloudflare Workers 解説

要約
個人開発者向けに、Vercel を使わずに SSR 対応の Next.js アプリを Cloudflare Workers にデプロイする構成を紹介
意見はこのエリアに表示されます

Vercel は便利で簡単だ。個人開発にとって簡単さは大切である

しかし、

  • Vercel の無料枠に依存したくない
  • Vercel のオンデマンドによるリソース消費が怖い
  • 月額費用を限りなく抑えたい
  • Cloudflare Workers の高速性を活かしたい

ある日、Vercel からFunction 使用量増加に関するメールが届いた

xxxx has used 75% of the monthly included Function Invocations on the pro plan. Once you hit 1M Invocations, additional usage is $0.60 per 1M Invocations.（プロプランの月間関数呼び出し回数の75%を使用しました。100万回を超えると、 100万回ごとに0.60ドルの追加料金が発生します。）

うーん、面倒やな

こういう悩みを持つ人向けに解決方法を書いた

SSR に対応したいときのインフラ選定の基準

選択肢特徴向いているケース備考
Vercel公式 Next.js 開発元。自動デプロイ・ISR/SSR 対応も簡単最小構成で始めたい／迷いたくない／とにかく楽したい無料枠あり。商用だと料金がやや高くなる
Cloudflare Workers + OpenNext超高速・グローバルエッジ・低コスト。OpenNext が SSR 対応化とにかく速く・安くしたい／エッジ重視／個人開発での運用Node.js API 非対応（V8ベース）だが Next.js が問題なく動く
Cloud Run / ECS / LambdaDocker コンテナや関数単位の構成。自由度が高く重処理も可複雑構成／外部API連携／重い処理やストリーミングがある場合学習コストはやや高め。料金設計に注意

注意点（SSRの場合）

  • Node.jsが使えるか？（Cloudflare Workersでは制限あり）
  • コールドスタート問題（ECS, Lambdaなどは初回遅い）
  • 料金体系のわかりやすさ（CloudflareやVercelは無料枠がわかりやすい）

構成概要

Next.js + OpenNext + Cloudflare Workers で動的アプリを公開することができる

SSR / API / Middleware 全部使える。つまり、Vercel と近い開発体験を維持しつつ、Cloudflareの超高速エッジ実行と低コストを享受できる構成が実現可能

Next.js と OpenNext は両方必要

Next.js はあくまで「アプリケーションの開発フレームワーク」

OpenNext はその Next.js アプリを Cloudflare Workers の仕様に合わせて「変換・ビルド」する役割

  • Next.js（SSR）アプリケーション
  • OpenNext（Next.js を Cloudflare Workers（など）に対応させるビルドシステム）
  • Cloudflare Workers（軽量で高速な実行環境）

Next.js で SSR を使いたい場合、Cloudflare Workers 上で動かすには OpenNext が必要

Next.js はもともと Vercel に最適化された構造をしているから、そのままでは Cloudflare Workers 向けの SSR ビルドが出力できない。

OpenNext はそれを解決してくれる非Vercel環境向けのNext.js変換ツール

Cloudflare スタック構築手順

個人開発向け、Cloudflare スタック構築の手順はこれ

  1. Next.js（SSR）+ OpenNext + Cloudflare Workers セットアップ
  2. JS サイズを最小化するため、wrangler.toml に minify = true 追加
  3. GitHub に push すると、自動でビルド＆デプロイされるように設定

以下の手順で、Cloudflare 環境へのデプロイが可能

1. プロジェクト初期化

OpenNext に対応した Cloudflare Workers プロジェクトを初期化する

このコマンドで、Next.js + OpenNext + Wrangler の構成が生成される

2. ビルド

これにより .open-next/ ディレクトリが生成され、Cloudflare Workers 用のバンドルが含まれます。

3. デプロイ

wrangler 経由で、Workers に SSR アプリが自動でデプロイされます。

4. 動的レンダリング確認

ブラウザや curl でヘッダーを確認し、x-nextjs-cache ヘッダーが MISS なら SSR が有効です。

補足設定

wrangler.jsonc に以下を追加すると JS サイズが最小化される

wrangler.toml における minify = true は、アップロード前に Worker スクリプト（JSなど）を最小化（空白・改行・コメント除去）する

この最小化がないと、gzip してもサイズが膨らみがちになり、無料枠（だいたい 1〜3MB圧縮後）を超えやすくなる

参考

画像最適化

あとは 画像最適化（Cloudflare Images） と R2キャッシュ（任意） を組み合わせれば、フルスタックNext.jsをCloudflareで完全に無料運用する構成が完成

終わりに

このスタックは、

  • インフラコストを抑えたい
  • Vercel のロックインを避けたい
  • Cloudflare のエッジ機能を活用したい

という個人開発者やスタートアップに非常におすすめ

Explore More
関連記事はありません。
Trends