Skip to main content
CloudflareとはWeb/Cloud管理画面開発環境Worker入門ローカル/デバッグ静的公開TypeScriptAPIReact連携独自ドメインCDN/キャッシュ守る基本保存先KVD1R2/ImagesDurable ObjectsQueuesCron/Workflows運用/LogsWorkers AIAI応用総仕上げ

第14章：Next.jsは“紹介するけど主役にしない”で学ぼう ▲⚛️☁️

この章では、Next.js を「がっつり習得する対象」としてではなく、Cloudflareの上でどう位置づけるかを理解するための地図として扱います 😊 いまの Cloudflare 公式の導線では、フルスタックの Next.js は Workers 側で案内され、静的書き出しだけを使う特殊ケースは Pages 側で案内されています。さらに Workers の Next.js ガイドは、詳しい実装方法として OpenNext の Cloudflare アダプタを参照する形になっています。 (Cloudflare Docs)

この章のゴール 🎯​

この章を終えるころには、次の3つを迷わず言えるようになるのが目標です ✨

  • 学習の主役は Cloudflare で、Next.js は必要になったときに使う選択肢 Learning Roles
  • フルスタックの Next.js を Cloudflare で動かすなら Workers 寄り
  • 静的サイトとして出すだけなら Pages もあり。ただし限定用途

この整理は Cloudflare 公式の現行ガイドそのものと一致しています。Pages の静的 Next.js ガイドには、**「静的 export に特定の理由がある場合以外は使わず、Next.js は Workers でのデプロイを推奨する」**と明記されています。 (Cloudflare Docs)

まず結論から 🌟​

1. 学習用として最初におすすめなのは「React + Workers」​

Cloudflare を学ぶ段階では、まず React で画面を作って、Workers で処理する 形のほうが全体像をつかみやすいです 😊 Next.js は便利ですが、SSR、ルーティング、ビルド、アダプタ、キャッシュ戦略など、理解する層が一気に増えます。Cloudflare 側も Next.js を Workers + OpenNext アダプタ で動かす構成として案内しています。 (Cloudflare Docs)

2. フルスタック Next.js を使うなら「Workers + OpenNext」​

Cloudflare の Next.js ガイドでは、C3 で --framework=next を使って始められますが、詳細な使い方は OpenNext サイトを参照する形です。OpenNext 側は、Next.js のビルド出力を Cloudflare Workers 上で動く形へ変換すると説明しています。 (Cloudflare Docs)

3. 静的サイトだけなら「Pages」も選べる​

Next.js は static export を使えば out フォルダに静的成果物を出せます。これは Pages に載せやすいです 👍 ただし static export では、サーバーを必要とする Next.js 機能は使えません。だから Pages は「たまたま Next.js を使っている静的サイト」に向いていて、「Next.js の強みをフルに使う場」ではありません。 (Next.js)

なぜ「主役にしない」のか 🧭​

理由はシンプルです。Cloudflareの理解に必要な本体知識と、Next.js固有知識が別物だからです 😌

Next.js そのものは、Cloudflare 公式でも フルスタックアプリ向けの React フレームワークとして紹介されています。Server-side rendering、Client-side rendering、Partial Prerendering まで含むので、とても高機能です。つまり便利なぶん、初心者には理解コストも上がります。 (Cloudflare Docs)

さらに Next.js 公式のデプロイ文書でも、Node.js サーバー / Docker / static export / adapters と複数の出し方が並んでいて、Cloudflare は「独自 integration を提供するプラットフォーム」として案内されています。加えて、Cloudflare と Netlify は verified adapter を構築中で、現時点では独自統合が中心だと整理されています。 なので教材としては、Next.js を“全部学ぶ”より、Cloudflareで使うときの置き場所だけを先に理解するほうが親切です。 (Next.js)

2026年4月15日時点のおすすめ整理 🪄​

パターンA：Cloudflareを学びたい​

React + Workers で進めるのがいちばん自然です 🌱 React and Workers この教材全体の中軸にも合っています。

パターンB：Next.js で画面も API もまとめたい​

Workers + OpenNext が本命です 🚀 Workers and OpenNext Cloudflare の Next.js ガイドもこの向きで、OpenNext Cloudflare アダプタが中心です。 (Cloudflare Docs)

パターンC：実質ほぼ静的サイト​

Pages + static export が候補です 📄 Pages and Static Export ただし Pages 側の公式ガイドが、“specific use case” のときだけと注意書きを入れているので、常用の第一候補ではありません。 (Cloudflare Docs)

公式の最新導線をやさしく整理するとこうです 🛣️​

新しく始める場合​

Cloudflare の Workers 向け Next.js ガイドでは、C3 から次の形で始められます。 (Cloudflare Docs)

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

既存の Next.js プロジェクトを持っている場合​

Cloudflare の Workers 側には、Wrangler が既存プロジェクトを自動検出して構成する案内があります。しかもこの導線は、Wrangler 4.68.0 以上が前提です。 (Cloudflare Docs)

一方で、OpenNext の Cloudflare CLI には、Cloudflare 向けの開発・ビルド・デプロイは opennextjs-cloudflare CLI を使い、wrangler を直接たたくのは文書で指示された場合か、理解している場合に限るとあります。さらに migrate コマンドで、依存導入、wrangler.jsonc、open-next.config.ts、.dev.vars、スクリプト更新、キャッシュ設定まで自動化できます。 (OpenNext)

このため教材では、既存 Next.js を Cloudflare に載せたいときは、Cloudflare の自動検出を知識として押さえつつ、実務的には OpenNext の流れを本線として理解する、という教え方がいちばん混乱しにくいです。 (Cloudflare Docs)

Pages と Workers の住み分けを、この章ではこう覚えよう 🧠​

Workers が向いているもの​

  • SSR を使いたい
  • API も同居させたい
  • AI 呼び出しも同じ基盤に寄せたい
  • 認証、動的処理、キャッシュ制御もやりたい

Cloudflare の現行ガイドでも、フルスタック SSR の Next.js は Workers 側を参照するよう案内されています。 (Cloudflare Docs)

Pages が向いているもの​

  • 静的 export のみ
  • 更新頻度が低いコーポレートサイト
  • ブログやドキュメント中心
  • 「Next.js を使っているけど、実質静的サイト」な案件

Next.js の static export は next build で out フォルダを生成しますが、サーバーが必要な機能は使えません。 (Next.js)

この章で押さえたい “Cloudflareらしい” Next.js の考え方 ☁️⚛️​

Next.js を使うと、つい「全部を Next の中に入れたくなる」ことがあります。 でも Cloudflare 学習では、Next.js は画面とルーティングの便利役、Cloudflare は実行基盤とAI・データ・配信の主役、という分け方がとても大事です 😊 Role Division

たとえば、AI 機能を入れるなら次の考え方が自然です。

  • 画面：Next.js
  • 推論：Workers AI
  • AI 通信の可視化やキャッシュ：AI Gateway
  • ベクトル検索：Vectorize
  • 検索全体をマネージドで寄せたい：AI Search

Workers AI は Workers / Pages / Cloudflare API から使え、AI Gateway は Workers AI への推論リクエストに対して analytics・caching・security を付けられます。Vectorize は Cloudflare のベクトルDB、AI Search は Webサイトや非構造データを取り込んで自然言語検索できる managed search として案内されています。 (Cloudflare Docs)

AI機能を入れるなら、この章ではこの設計がきれいです 🤖✨​

いちばんわかりやすい形​

Next.js の画面 → Cloudflare 側のAI処理 です。 つまり、「UI は Next.js」「AI 実行は Cloudflare」という役割分担です。

さらに Cloudflare 中心にしたい形​

Next.js の前段・横に Worker を置く 形もきれいです。 Cloudflare の Service bindings を使うと、公開URLを通さずに Worker 同士をつなげることができます。なので、Next 側の処理と AI 専用 Worker を分けても、内部通信をすっきり保てます。 (Cloudflare Docs) Service Bindings

この設計にすると、あとから 「検索は Vectorize に分離」 「AI Gateway を通してログを見たい」 「AI Search を追加したい」 みたいな拡張がしやすくなります。AI Search は Vectorize、AI Gateway、R2、Browser Rendering、Workers AI とネイティブ統合する形で案内されています。 (Cloudflare Docs)

VS Code と GitHub Copilot は、この章ではどう使う？ 💻🤝​

この章では Copilot を “全部書かせる道具” ではなく “構成を理解する補助役” として使うのがおすすめです ✍️ Copilot Usage

VS Code の agent mode は、コードベース解析、複数ファイル編集提案、ターミナルコマンド実行、エラーを見ての自動修正ループまで扱え、さらに MCP サーバーや拡張機能のツールも利用できます。VS Code 側の MCP 文書でも、MCP は外部ツールやサービスにつなぐための標準として説明されています。 (Visual Studio Code)

また GitHub の公式 MCP サーバーを VS Code の Copilot Chat で使うと、Agent モードから issue 作成、PR 一覧取得、repo 情報取得などを直接扱えます。 つまりこの章では、Copilot に 「wrangler.jsonc の意味を説明して」 「open-next.config.ts の役割を初心者向けに整理して」 「この変更で Pages 向きか Workers 向きか判定して」 のように聞くのが、とても相性がいいです。 (GitHub Docs)

この章の教材本文 📘✨​

14-1. Next.js は“便利な選択肢”であって、最初の必修ではない​

Cloudflare 学習では、最初から Next.js に入るより、Workers と React の役割を先に理解したほうが全体が見えやすいです。 Next.js は後から載せてもよく、むしろ 「なぜ Next.js が必要なのか」 が分かってからのほうが吸収しやすいです 😊

14-2. Cloudflare での Next.js は「Workers + OpenNext」が本線​

いまの公式導線では、Cloudflare 上でフルスタック Next.js をやるときの中心は Workers 側です。 Cloudflare の Next.js ガイドは OpenNext を参照し、OpenNext はビルド出力を Workers 実行向けに変換する役目を担います。 (Cloudflare Docs)

14-3. Pages は「静的に出すだけ」のときに使う​

Pages にも Next.js ガイドはありますが、これは static export 向けです。 Cloudflare 自身が「特定用途以外では Workers 推奨」と言っているので、学習者は Pages = 静的寄り と覚えておけば十分です。 (Cloudflare Docs)

14-4. AI を入れるなら、Next.js に全部背負わせない​

Next.js を UI 担当、Cloudflare を AI・検索・配信担当にすると、構成がきれいです。 Workers AI、AI Gateway、Vectorize、AI Search がすでに揃っているので、Next.js はあくまで入口画面として使うと、Cloudflare中心の教材としても筋が通ります。 (Cloudflare Docs)

この章で見せたい最小コマンド例 🛠️​

新規作成のイメージ​

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

Cloudflare の公式 Next.js ガイドにある出発点です。 (Cloudflare Docs)

既存プロジェクトを Cloudflare 向けに寄せるイメージ​

npx @opennextjs/cloudflare migrate
pnpm opennextjs-cloudflare preview
pnpm opennextjs-cloudflare deploy

OpenNext の Cloudflare CLI は、migrate / preview / deploy を提供していて、Cloudflare 向けの構成変換やローカル確認、デプロイを担います。 (OpenNext)

演習課題 🧪🎓​

演習1　3つの案件を分類しよう​

次の案件が React+Workers / Next+Workers / Next static + Pages のどれ向きか考えてみましょう。

  • お問い合わせフォーム付きの小規模LP
  • ログイン後にユーザー別の内容を出すダッシュボード
  • AIチャット付きのナレッジ検索サイト

答えの目安としては、 静的中心なら Pages も候補、 動的処理や AI が入るなら Workers 寄り、 という整理です。Pages Functions 自体は動的コードも扱えますが、Next.js の full-stack SSR の案内先はやはり Workers 側です。 (Cloudflare Docs)

演習2　Copilot に“説明役”をやらせよう​

VS Code の Copilot Chat で、次のように質問してみましょう 💬

  • 「この wrangler.jsonc を初心者向けに説明して」
  • 「open-next.config.ts は何のためにある？」
  • 「このアプリは Pages と Workers のどちらが向いている？」
  • 「Workers AI を組み込みたい。Next.js 側と Cloudflare 側の責務分割を提案して」

agent mode は複数ファイルやターミナルも扱えるので、設定の読み解きに向いています。 (Visual Studio Code)

演習3　AIを1つだけ足す設計図を書こう​

Next.js の画面から、Cloudflare 側の AI 機能を 1つだけ 呼ぶ設計を紙に書いてみましょう 📝 候補は次のどれかで十分です。

  • Workers AI で文章要約
  • Vectorize で類似検索
  • AI Search で自然言語検索
  • AI Gateway で AI リクエストの可視化

Workers AI と AI Gateway は相性がよく、AI Search はマネージド検索として別の入口も作れます。 (Cloudflare Docs)

よくあるハマりどころ ⚠️😵​

「Next.js だからとりあえず Pages」​

これは初心者がやりがちです。 でも Cloudflare の公式整理では、フルスタック Next.js は Workers、static export の特定用途だけ Pages です。 (Cloudflare Docs)

「static export なのに SSR 前提で考える」​

static export は便利ですが、サーバー機能が必要な Next.js 機能は使えません。 「静的なのか、動的なのか」を先に切り分けるのが大事です。 (Next.js)

「AI を全部 Next.js の中に押し込む」​

Cloudflare には Workers AI、AI Gateway、Vectorize、AI Search があるので、AI 処理を Cloudflare 側に寄せるほうが教材としても設計としてもきれいです。 (Cloudflare Docs)

「Copilot の提案をそのまま正解と思う」​

Copilot は強いですが、章の目的は 理解して選べること です。 特に Next.js と Cloudflare の境界は変化しやすいので、生成結果より 公式ドキュメントとの整合確認 を優先しましょう。Cloudflare 側も OpenNext、Wrangler、自動構成、Pages/Workers の住み分けをそれぞれ別文書で案内しています。 (Cloudflare Docs)

発展メモ 🚧✨​

OpenNext + Cloudflare には、remote bindings を使ってローカル開発中の Next.js から、実際に Cloudflare 上の D1 / KV / R2 などへつなぐベータ機能も案内されています。 これはかなり便利ですが、初学者には少し高度なので、本章では「将来こういう本格運用もある」くらいの紹介で十分です。 (Cloudflare Docs)

まとめ 🌈​

この章でいちばん大事なのは、Next.js を学ぶことではなく、Cloudflareの中で Next.js をどう使い分けるかを理解することです 😊

覚え方はこれだけでOKです ✨

  • 学習の本線：React + Workers
  • Next.js を本格運用：Workers + OpenNext
  • 静的サイトとして割り切る：Pages + static export
  • AI は Cloudflare 側に寄せる：Workers AI / AI Gateway / Vectorize / AI Search

これで、第14章の役目である「Next.js を見ても迷子にならない交通整理」は十分です。Cloudflare の公式導線でも、まさにこの住み分けが見える形になっています。 (Cloudflare Docs)

次に続けるなら、そのまま第15章向けに、Cloudflare AI・Copilot・MCP を前提にした詳細教材へきれいにつなげられます。