Supported features
@cloudflare/next-on-pages
supports all minor and patch version of Next.js 13 and 14. We regularly run manual and automated tests to ensure compatibility.
Next.js has two "runtimes" ↗ — "Edge" and "Node.js".
The @cloudflare/next-on-pages
adapter supports only the edge "runtime".
The @opennextjs/cloudflare
adapter ↗, which lets you build and deploy Next.js apps to Cloudflare Workers, supports the Node.js "runtime" from Next.js. When you use it, you can use the full set of Node.js APIs that Cloudflare Workers provide.
@opennextjs/cloudflare
is pre 1.0, and still in active development. As it approaches 1.0, it will become the clearly better choice for most Next.js apps, since Next.js has been engineered to only support its Node.js "runtime" for many newly introduced features.
Refer to the OpenNext docs ↗ and the Workers vs. Pages compatibility matrix for more information to help you decide which to use.
When you use @cloudflare/next-on-pages
, your Next.js app must use the "edge" runtime from Next.js. The Workers runtime supports a broad set of Node.js APIs — but the Next.js Edge Runtime code intentionally constrains this ↗. As a result, only the following Node.js APIs will work in your Next.js app:
buffer
events
assert
util
async_hooks
If you need to use other APIs from Node.js, you should use @opennextjs/cloudflare
↗ instead.
Cloudlflare recommends using the App router ↗ from Next.js.
Cloudflare also supports the older Pages ↗ router from Next.js.
next.config.js
— app router ↗ and `next.config.js - pages router ↗
Option | Next Docs | Support |
---|---|---|
appDir | app ↗ | ✅ |
assetPrefix | pages ↗, app ↗ | 🔄 |
basePath | pages ↗, app ↗ | ✅ |
compress | pages ↗, app ↗ | N/A 1 |
devIndicators | pages ↗, app ↗ | N/A 2 |
distDir | pages ↗, app ↗ | N/A 3 |
env | pages ↗, app ↗ | ✅ |
eslint | pages ↗, app ↗ | ✅ |
exportPathMap | pages ↗, app ↗ | N/A 4 |
generateBuildId | pages ↗, app ↗ | ✅ |
generateEtags | pages ↗, app ↗ | 🔄 |
headers | pages ↗, app ↗ | ✅ |
httpAgentOptions | pages ↗, app ↗ | N/A |
images | pages ↗, app ↗ | ✅ |
incrementalCacheHandlerPath | app ↗ | 🔄 |
logging | app ↗ | N/A 5 |
mdxRs | app ↗ | ✅ |
onDemandEntries | pages ↗, app ↗ | N/A 6 |
optimizePackageImports | app ↗ | ✅/N/A 7 |
output | pages ↗, app ↗ | N/A 8 |
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/A 13 |
trailingSlash | pages ↗, app ↗ | ✅ |
transpilePackages | pages ↗, app ↗ | ✅ |
turbo | pages ↗, app ↗ | 🔄 |
typedRoutes | app ↗ | ✅ |
typescript | pages ↗, app ↗ | ✅ |
urlImports | pages ↗, app ↗ | ✅ |
webpack | pages ↗, app ↗ | ✅ |
webVitalsAttribution | pages ↗, app ↗ | ✅ |
- ✅: Supported- 🔄: Not currently supported- ❌: Not supported- N/A: Not applicable
Cloudflare also supports Next.js' internationalized (i18n
) routing ↗.
If you use Incremental Static Regeneration (ISR)14, @cloudflare/next-on-pages
will use static fallback files that are generated by the build process.
This means that your application will still correctly serve your ISR/prerendered pages (but without the regeneration aspect). If this causes issues for your application, change your pages to use server side rendering (SSR) instead.
Background
ISR pages are built by the Vercel CLI to generate Vercel Prerender Functions ↗. These are Node.js serverless functions that can be called in the background while serving the page from the cache.
It is not possible to use these with Cloudflare Pages and they are not compatible with the edge runtime ↗ currently.
@cloudflare/next-on-pages
supports standard statically generated routes.
It does not support dynamic Node.js-based on-demand handling of such routes.
For more details see:
Revalidation and next/cache
are supported on Cloudflare Pages and can use various bindings. For more information, see our caching documentation.