Deploy Next.js apps to Cloudflare!
OpenNext for Cloudflare is Cloudflare specific adapter that enables deployment of Next.js applications to Cloudflare.
You can use create-next-app
to start a new application or take an existing Next.js application and deploy it to Cloudflare using the following few steps:
-
add the following
devDependencies
to thepackage.json
:npm add -D wrangler@latest @opennextjs/cloudflare # or pnpm add -D wrangler@latest @opennextjs/cloudflare # or yarn add -D wrangler@latest @opennextjs/cloudflare # or bun add -D wrangler@latest @opennextjs/cloudflare
-
add a
wrangler.toml
at the root of your project#:schema node_modules/wrangler/config-schema.json name = "<your-app-name>" main = ".worker-next/index.mjs" compatibility_date = "2024-09-23" compatibility_flags = ["nodejs_compat"] # Use the new Workers + Assets to host the static frontend files assets = { directory = ".worker-next/assets", binding = "ASSETS" }
You can enable Incremental Static Regeneration (ISR) by adding a KV binding named NEXT_CACHE_WORKERS_KV
to your wrangler.toml
:
-
Create the binding
npx wrangler kv namespace create NEXT_CACHE_WORKERS_KV # or pnpm wrangler kv namespace create NEXT_CACHE_WORKERS_KV # or yarn wrangler kv namespace create NEXT_CACHE_WORKERS_KV # or bun wrangler kv namespace create NEXT_CACHE_WORKERS_KV
-
Paste the snippet to your
wrangler.toml
:[[kv_namespaces]] binding = "NEXT_CACHE_WORKERS_KV" id = "..."
[!WARNING] The current support for ISR is limited.
- you can use the regular
next
CLI to start the Next.js dev server:
Run the following commands to preview the production build of your application locally:
-
build the app and adapt it for Cloudflare
npx cloudflare # or pnpm cloudflare # or yarn cloudflare # or bun cloudflare
-
Preview the app in Wrangler
npx wrangler dev # or pnpm wrangler dev # or yarn wrangler dev # or bun wrangler dev
Deploy your application to production with the following:
-
build the app and adapt it for Cloudflare
npx cloudflare && npx wrangler deploy # or pnpm cloudflare && pnpm wrangler deploy # or yarn cloudflare && yarn wrangler deploy # or bun cloudflare && bun wrangler deploy