【無料枠】Cloudflare × Next.jsエッジ開発：制限を理解して最大限活用する

## 1. はじめに

本記事では、**Next.js**を用いた**エッジ実行**による高速なWebアプリケーション開発に関心のあるエンジニアを対象に、**Cloudflare Workers**と**Cloudflare Pages**を活用して**フロントエンドからバックエンドまで一括管理**する方法をご紹介します。  
**サーバーレス**や**エッジコンピューティング**、さらに**CI/CD**の自動化を重視する方にとって、Cloudflareは無料プランでも非常に使いやすいプラットフォームです。本記事を通じて、以下の内容を体系的に理解できるようまとめました。

- **Cloudflare WorkersとPagesの概要**
- **Next.js App Routerとの連携方法**
- **無料プランでのリソース上限と制限事項**
- **具体的な構成例とメリット・デメリット**
- **今後の展望**

次章より順を追って解説していきます。

---

## 2. Cloudflare WorkersとPagesの概要

### Cloudflare Workersとは
**Cloudflare Workers**は、グローバルに分散されたCloudflareのエッジネットワーク上で、JavaScript/TypeScriptなどのコードをサーバーレスで実行できるサービスです。AWS LambdaやFirebase Functionsと同様に、**リクエストに応じて動的な処理を行うバックエンドロジック**を簡単にデプロイできます。  
最大の特徴は、**リクエストがユーザーに近いエッジサーバーで即時に処理される**ため、従来のリージョンサーバー型に比べてレイテンシが非常に低いことです。また、Workers KVやR2、D1などの**各種ストレージサービス**と組み合わせることで、グローバルにスケーラブルなバックエンド環境が構築可能です。

### Cloudflare Pagesとは
一方の**Cloudflare Pages**は、**静的サイト**や**フロントエンドアプリケーション**（ビルド済みのHTML／CSS／JavaScript）のホスティングに特化したサービスです。Jamstackを念頭に置いており、ビルドした成果物を**CDNを介してエッジ配信**することで高速なレスポンスを実現します。  
さらに、Pagesは**フルスタック対応**が可能になり、**エッジ関数（Edge Functions）** を通じて動的処理を組み込むこともできます。結果的に、**フロントエンドとバックエンドの両方**をCloudflareで一元化し、シームレスにデプロイできるのが大きな強みです。

### サービスの住み分け
- **Workers**: バックエンド処理（API、動的ロジック）
- **Pages**: フロントエンド配信（静的アセット、SSR対応のNext.jsなど）

両者は用途こそ異なるものの、相互連携することで**高いパフォーマンスのフルスタックアプリケーション**を実現します。

---

## 3. Next.js App Routerとの連携

### Next.jsのエッジ対応ポイント
**Next.js**はもともとNode.jsランタイム上で動作することを前提としていますが、近年は**Edge Runtime**にも公式対応しており、**`export const runtime = 'edge'`** を宣言することでエッジ上で実行できるようになりました。  
一方、Cloudflare Pages上でNode.jsのAPIをそのまま使うことはできません。そこで登場するのが**公式アダプタ（`@cloudflare/next-on-pages`）** です。

### 公式アダプタ（@cloudflare/next-on-pages）の利用方法
`@cloudflare/next-on-pages`を使うと、**Next.jsのアプリをCloudflare Pages用にビルド**できます。基本的なステップは以下のとおりです。

1. **パッケージをインストール**  
   ```bash
   npm install -D @cloudflare/next-on-pages
   ```
2. **Next.js設定ファイルでエッジ実行を有効化**  
   - App Router使用時には、ページやレイアウトごとに  
     ```ts
     export const runtime = 'edge';
     ```
     の指定が必要です。
3. **ビルドコマンドに組み込む**  
   ```jsonc
   // package.json (例)
   {
     "scripts": {
       "build": "next build",
       "pages:build": "npx @cloudflare/next-on-pages"
     }
   }
   ```
4. **Cloudflare Pagesのビルド設定で上記コマンドを実行**  
   - 「Build command」に`npm run build && npm run pages:build`のように設定し、ビルド後にエッジで動作可能な成果物を生成します。

### 導入手順と設定の注意点
- **Edge Runtime**ではNode.js特有のモジュール（fsやnetなど）が使えないので注意が必要です。  
- 大規模アプリの場合はビルド時間が長くなることがあるため、**Pagesのビルド回数制限**（後述）に留意しながらCI/CDを計画しましょう。  
- デプロイ後は`your-project.pages.dev`でSSRやAPIルートがすぐに利用できます。カスタムドメインの設定も可能です。

---

## 4. 無料プランのリソース上限と制限

Cloudflareの無料プランは非常に寛大ですが、以下のように**Workers**と**Pages**でそれぞれ制限があります。用途やアクセス規模によっては**有料プラン**への移行を検討してください。

### Cloudflare Workersの無料枠
- **リクエスト数**: **1日あたり 100,000リクエスト**まで  
- **CPU時間**: 1リクエストあたり**最大10ms**  
- **メモリ**: 1つのWorkers実行あたり**最大128MB**  
- **Workers KV**: **1日100k回の読み取り、1k回の書き込み/削除、1GBストレージ**  
- **サブドメイン/Worker数**: 無料枠で**100個まで**のWorkerを作成可能

### Cloudflare Pagesの無料枠
- **ビルド（デプロイ）回数**: **月500回**まで（同時ビルドは1件）  
- **静的サイト配信**: 帯域無制限（ただしファイルサイズは**1ファイル25MB以下**、**最大20,000ファイル**程度）  
- **Edge Functions（Pages Functions）**: 実質Workersのリクエスト枠を利用  
- **カスタムドメイン**: **1プロジェクトにつき100件**まで追加可能  
- **プロジェクト数**: ソフトリミットで**100個程度**

### 比較表

| 項目                          | **Cloudflare Workers (無料)**                       | **Cloudflare Pages (無料)**               |
| :---------------------------: | :-------------------------------------------------- | :---------------------------------------- |
| **リクエスト数**             | **1日 100,000回**                                   | 静的コンテンツは**実質無制限**            |
| **CPU実行時間**              | **～10ms/リクエスト**                               | （FunctionsはWorkersと同等の制限）        |
| **ビルド/デプロイ**          | 制限なし（Workers側にビルドの概念はなし）           | **月500回**（同時ビルド数1）              |
| **静的ストレージ**           | －                                                  | **1ファイル25MB／合計20,000ファイル程度** |
| **KVストレージ**             | **1日100k読/1k書、最大1GB**                         | Workers枠と共有                            |
| **カスタムドメイン**         | 任意ドメインにバインド可能                          | **1プロジェクト100件**                    |
| **料金超過時の動作**         | 超過分はエラー応答                                  | ビルド回数超過時はその月の追加デプロイ不可 |

**ポイント:**  
- **Workers**はバックエンド処理での1日リクエスト上限があり、**約1.16リクエスト/秒**に相当します。アクセスが多い場合や不正リクエストが多い場合にはすぐに到達する可能性があります。  
- **Pages**は静的配信が原則無制限ですが、**ビルド回数が月500回**なので、頻繁に更新・デプロイするワークフローの場合は注意が必要です。  
- 超過時の挙動はそれぞれ異なるので、商用で利用する際は早めに**有料プラン**の検討がおすすめです。

---

## 5. 具体的な活用例と構成図

ここからは、Next.jsアプリをCloudflare Pages（フロントエンド）＋Workers（バックエンド）で構築する構成例を示します。

### フロントエンドとバックエンドの統合構成

```mermaid
flowchart LR
    A[ブラウザ] --> B[（Cloudflare エッジ）]
    B -->|静的配信 or SSR| C[Cloudflare Pages<br>（Next.js）]
    B -->|APIリクエスト| D[Cloudflare Workers<br>（Edge Functions）]
    D -->|KV/D1などの<br>データアクセス| E[Cloudflare ストレージ群]
    C -->|必要に応じて fetch| D
    D -->|JSONレスポンス<br>などを返却| C
    C -->|HTML/JS/CSS| A
```

- **Cloudflareエッジ**がユーザーの最寄りロケーションでリクエストを受け取り、**フロントエンド**に該当すれば`Pages`が**静的ファイルまたはエッジSSR**を実行。  
- **API呼び出し**が必要になれば`Workers`が処理し、必要に応じて**KVやD1**などのストレージを参照してデータを取得・更新。  
- HTML/JS/CSSなどの静的コンテンツはPagesが配信するため、**グローバルなCDN**として機能。  
- 結果的に**静的アセットの超高速配信**と**エッジでのAPI処理**を両立した構成になります。

### 実際の利用シナリオ

- **ヘッドレスCMS連携**  
  Next.jsで構築したブログやコーポレートサイトを **ISR（増分静的再生成）** やエッジSSRで配信しつつ、CMSのデータを`Workers`経由で取得して動的に更新。
- **認証付きWebアプリ**  
  ログインやJWT検証などの認証APIを`Workers`で実装。Next.jsのサーバーコンポーネントやAPI Routes（edge runtime）で呼び出し、**グローバルにユーザー認証**が可能。
- **画像処理サービス**  
  フロントはNext.js、画像アップロードはR2、そして`Workers`でリサイズやフォーマット変換。エッジ上で処理することで高速な応答を提供。

---

## 6. メリット・デメリットの考察

### メリット
1. **グローバルな低レイテンシ**  
   Cloudflareのエッジネットワークにより、世界中のユーザーに対して**一貫して高速**なレスポンスを実現。  
2. **無料プランが充実＆スケーラブル**  
   **100,000リクエスト/日**までのWorkers枠や**無制限帯域**のPagesなど、開発初期のコストを抑えつつ、スケール時には有料プランで強化可能。  
3. **エッジ実行による高速SSR**  
   Next.jsのSSRも**エッジ上で完結**し、コールドスタートも小さいため、動的ページでも体感速度が高い。  
4. **運用がシンプル**  
   Gitにプッシュするだけで**CI/CDが自動化**され、**カスタムドメインやSSL**も無料。複数環境のプレビュー生成も容易。  
5. **Cloudflareエコシステムとの統合**  
   KV、R2、D1などの**サーバレスストレージ**や、Queue、AI機能などとも連携しやすい。

### デメリット（注意点）
1. **Node.js APIの非互換**  
   **Edge Runtime**ではNode.jsのネイティブモジュールやファイルシステムが使えない。画像処理ライブラリ（Sharpなど）もNG。  
2. **Next.js新機能の一部制限**  
   **ISRの一部挙動やMiddleware**など、Edge Runtime未対応の機能がある。アダプタのアップデート状況を追う必要あり。  
3. **無料プランのリクエスト上限**  
   大量アクセス時に**1日100kリクエスト**を突破すると、その日はWorkersが停止するリスクがある。  
4. **デバッグ手法の差異**  
   ローカルNode.jsと同じ感覚ではデバッグできず、**WranglerやCloudflareログ**での確認が主体。  
5. **ベンダーロックインの可能性**  
   `@cloudflare/next-on-pages`やWorkers特有の実装に依存すると、他サービスへ移行時に修正コストが発生する。

---

## 7. まとめと今後の展望

**Cloudflare Workers**と**Cloudflare Pages**は、**Next.js**をはじめとするモダンフロントエンドフレームワークと組み合わせることで、**グローバルCDNとエッジサーバレスの強み**を最大限活かせるプラットフォームです。  
特に**無料プラン**でも十分なリソースを試せるため、個人プロジェクトから企業のPoCまで幅広く導入が進んでいます。将来的には**D1（Cloudflare独自のSQLデータベース）**や**AI機能**の強化など、よりエッジネイティブなアプリケーション構築が当たり前になるでしょう。  
今後のアップデートで**Next.jsの新機能対応**がさらに進めば、**フロントエンドとバックエンドの垣根を感じさせない快適なエッジ開発体験**が実現していくはずです。ぜひこの機会に、**Edge Runtimeを活用したNext.jsアプリ**を試してみてください。

---

## 参考文献

- [Main Differences Between Cloudflare Workers and Pages](https://www.clique8.com/article/main-differences-between-cloudflare-workers-and-pages)
- [Cloudflare WorkersとCloudflare Pagesの違い | ithands](https://www.ithands.dev/cloudflare-workers/)
- [Deploying Next.js 13 (app dir) to Cloudflare Pages | LogSnag](https://logsnag.com/blog/deploying-nextjs-13-app-dir-to-cloudflare-pages)
- [Cloudflare Pagesがフルスタック](https://blog.cloudflare.com/ja-jp/cloudflare-pages-goes-full-stack)
- [Cloudflare Workersを使ってパスベースでリクエストをルーティングする #cloudflare - Qiita](https://qiita.com/devneko/items/fb1428d2a3ac966c51be)
- [Pricing · Cloudflare Workers KV docs](https://developers.cloudflare.com/kv/platform/pricing/)
- [Cloudflare Pages](https://pages.cloudflare.com/)
- [And just like that, I was done with Netlify - Made Mistakes](https://mademistakes.com/notes/done-with-netlify/)
- [Limits · Cloudflare Pages docs](https://developers.cloudflare.com/pages/platform/limits/)
- [Cloudflare Pages Goes Full Stack](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/)
- [Supported features · Cloudflare Pages docs](https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/supported-features/)
- [Implementing the “Cloudflare worker stack” - DEV Community](https://dev.to/shiwaforce/implementing-the-cloudflare-worker-stack-3992)

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/