サポートされている機能
@cloudflare/next-on-pages は、Next.js 13 および 14 のすべてのマイナーおよびパッチバージョンをサポートしています。互換性を確保するために、定期的に手動および自動テストを実施しています。
Next.js には 2 つの “ランタイム” ↗ — “Edge” と “Node.js” があります。Cloudflare 上で Next.js アプリを実行する際には、利用可能な Node.js API を使用できますが、現在は Next.js の “Edge” ランタイムのみを使用できます。
Workers ランタイムは 広範な Node.js API のセットをサポートしています — しかし、Next.js Edge ランタイムのコードは意図的にこれを制約しています ↗。その結果、Next.js アプリで動作する Node.js API は以下のものだけです：
buffereventsassertutilasync_hooks
Cloudflare は Next.js の App ルーター ↗ の使用を推奨しています。
Cloudflare はまた、Next.js の古い Pages ↗ ルーターもサポートしています。
next.config.js — app ルーター ↗ および `next.config.js - pages ルーター ↗
| オプション | Next ドキュメント | サポート |
|---|---|---|
| appDir | app ↗ | ✅ |
| assetPrefix | pages ↗, app ↗ | 🔄 |
| basePath | pages ↗, app ↗ | ✅ |
| compress | pages ↗, app ↗ | N/A1 |
| devIndicators | pages ↗, app ↗ | N/A2 |
| distDir | pages ↗, app ↗ | N/A3 |
| env | pages ↗, app ↗ | ✅ |
| eslint | pages ↗, app ↗ | ✅ |
| exportPathMap | pages ↗, app ↗ | N/A4 |
| generateBuildId | pages ↗, app ↗ | ✅ |
| generateEtags | pages ↗, app ↗ | 🔄 |
| headers | pages ↗, app ↗ | ✅ |
| httpAgentOptions | pages ↗, app ↗ | N/A |
| images | pages ↗, app ↗ | ✅ |
| incrementalCacheHandlerPath | app ↗ | 🔄 |
| logging | app ↗ | N/A5 |
| mdxRs | app ↗ | ✅ |
| onDemandEntries | pages ↗, app ↗ | N/A6 |
| optimizePackageImports | app ↗ | ✅/N/A7 |
| output | pages ↗, app ↗ | N/A8 |
| pageExtensions | pages ↗, app ↗ | ✅ |
| Partial Prerendering (experimental) | app ↗ | ❌9 |
| poweredByHeader | pages ↗, app ↗ | 🔄 |
| productionBrowserSourceMaps | pages ↗, app ↗ | 🔄10 |
| reactStrictMode | pages ↗, app ↗ | ❌11 |
| redirects | pages ↗, app ↗ | ✅ |
| rewrites | pages ↗, app ↗ | ✅ |
| Runtime Config | pages ↗, app ↗ | ❌12 |
| serverActions | app ↗ | ✅ |
| serverComponentsExternalPackages | app ↗ | N/A13 |
| trailingSlash | pages ↗, app ↗ | ✅ |
| transpilePackages | pages ↗, app ↗ | ✅ |
| turbo | pages ↗, app ↗ | 🔄 |
| typedRoutes | app ↗ | ✅ |
| typescript | pages ↗, app ↗ | ✅ |
| urlImports | pages ↗, app ↗ | ✅ |
| webpack | pages ↗, app ↗ | ✅ |
| webVitalsAttribution | pages ↗, app ↗ | ✅ |
- ✅: サポートされている- 🔄: 現在サポートされていない- ❌: サポートされていない- N/A: 該当なしCloudflareはNext.jsの国際化（i18n）ルーティング ↗もサポートしています。
Incremental Static Regeneration (ISR)14を使用する場合、@cloudflare/next-on-pagesはビルドプロセスによって生成された静的フォールバックファイルを使用します。
これは、アプリケーションがISR/プリレンダリングされたページを正しく提供し続けることを意味します（ただし、再生成の側面はありません）。これがアプリケーションに問題を引き起こす場合は、ページをサーバーサイドレンダリング（SSR）を使用するように変更してください。
Background
ISRページはVercel CLIによって構築され、Vercelのプリレンダーファンクション ↗を生成します。これらは、ページをキャッシュから提供しながらバックグラウンドで呼び出すことができるNode.jsのサーバーレス関数です。
これらはCloudflare Pagesで使用することはできず、現在エッジランタイム ↗と互換性がありません。
@cloudflare/next-on-pagesは標準の静的生成されたルートをサポートしています。
動的なNode.jsベースのオンデマンド処理はサポートしていません。
詳細については、以下を参照してください：
再検証とnext/cacheはCloudflare Pagesでサポートされており、さまざまなバインディングを使用できます。詳細については、キャッシングのドキュメントを参照してください。
-
compression: Cloudflare は gzip または brotli 圧縮を自動的に適用します。ローカルで Wrangler を使用して開発している場合、圧縮は適用されません。 ↩
-
dev indicators:
wrangler pages devを使用して開発している場合、dev インジケーターが表示されないため、アプリケーションがハードリフレッシュされます。next devを使用してローカルでアプリを実行すると、このオプションは正常に機能します。 ↩ -
setting custom build directory:
@cloudflare/next-on-pagesを使用して構築されたアプリケーションは.nextディレクトリに依存しないため、このオプションは実際には適用されません（@cloudflare/next-on-pagesの同等物は--outdirフラグを使用することです）。 ↩ -
exportPathMap: SSG 用に使用されるオプションで、
@cloudflare/next-on-pagesを使用して構築されたアプリには適用されません。 ↩ -
logging:
wrangler pages devを使用して開発している場合、追加のロギングは適用されません（実質的にプロダクションビルドを実行しているため）。next devを使用してローカルでアプリを実行すると、このオプションは正常に機能します。 ↩ -
onDemandEntries: 開発中の Next.js サーバーのオプションであり、私たちはこれに依存していないため、適用されません。 ↩
-
optimizePackageImports:
@cloudflare/next-on-pagesはチャンクの重複を排除し、モジュールのレイジーローディングに基づいた実装を提供します。これに基づいてoptimizePackageImportsを適用しても、CLI によって生成される出力には影響しません。ただし、この構成はビルドプロセスを高速化するために使用できます（next devを実行する場合や、プロダクションビルドを生成する場合の両方で）。 ↩ -
output:
@cloudflare/next-on-pagesは標準の Next.js 出力で動作し、standaloneはそれと互換性がなく、exportは静的サイトを生成するために使用され、@cloudflare/next-on-pagesを実行する必要はありません。 ↩ -
Partial Prerendering (experimental): 公式の Next.js ドキュメント ↗ に示されているように、
Partial Prerendering は Node.js ランタイム専用に設計されています。そのため、@cloudflare/next-on-pages（エッジランタイムでのみ動作する）とは根本的に互換性がありません。 ↩ -
productionBrowserSourceMaps:
@cloudflare/next-on-pagesによって行われるwebpackチャンクの重複排除は、現在のところソースマップを保持しないため、このオプションは実装できません。将来的にはソースマップを保持することを試みるかもしれませんが、その場合、このオプションも簡単にサポートできるはずです。 ↩ -
reactStrictMode: 現在、アプリケーションはreact strict mode（ローカル開発機能）がどちらの方法でも機能しないようにビルドされています。strict modeを機能させることができれば、このオプションはおそらくすぐに機能するでしょう。 ↩
-
runtime configuration: ランタイム構成の実装を検討することはできますが、これはレガシー構成であり、環境変数を代わりに使用すべきなので、あまり価値はないでしょう。 ↩
-
serverComponentsExternalPackages: このオプションはNode.jsで実行されるアプリケーション向けのものであり、Cloudflare Pagesで実行されるアプリケーションには関連しません。 ↩
-
Incremental Static Regeneration (ISR) ↗は、Next.jsのレンダリングモードで、ページを自動的にキャッシュし、新しいデータで定期的に再生成することを可能にします。 ↩