Next.js

In this guide, you will create a new Next.js ↗ application and deploy to Cloudflare Workers (with the new Beta Workers Assets) using the @opennextjs/cloudflare ↗ package.

Note

If your Next.js app currently runs on Vercel, you can easily migrate your Next.js app to Cloudflare by using Diverce ↗, which will automatically add OpenNext to your project and create a pull request that makes it deployable to Cloudflare.

New apps

To create a new Next.js app, pre-configured to run on Cloudflare using @opennextjs/cloudflare ↗, run:

npm

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

pnpm

pnpm create cloudflare@latest my-next-app --framework=next --platform=workers

yarn

yarn create cloudflare my-next-app --framework=next --platform=workers

For setup, select the following options:

• For What would you like to start with?, choose Framework Starter.
• For Which development framework do you want to use?, choose Next.js.
• Complete the framework's own CLI wizard.
• For Do you want to use git for version control?, choose Yes.
• For Do you want to deploy your application?, choose No (we will be making some changes before deploying).

Existing Next.js apps

Minimum required Wrangler version: 3.99.0.

Check your version by running wrangler --version. To update Wrangler, refer to Install/Update Wrangler.

1. Install @opennextjs/cloudflare

First, install @opennextjs/cloudflare ↗:

npm install --save-dev @opennextjs/cloudflare

2. Add a Wrangler configuration file

Then, add a Wrangler configuration file to the root directory of your Next.js app:

wrangler.jsonc

{
  "main": ".open-next/worker.js",
  "name": "my-app",
  "compatibility_date": "2024-09-23",
  "compatibility_flags": [
    "nodejs_compat"
  ],
  "assets": {
    "directory": ".open-next/assets",
    "binding": "ASSETS"
  }
}

wrangler.toml

main = ".open-next/worker.js"
name = "my-app"
compatibility_date = "2024-09-23"
compatibility_flags = ["nodejs_compat"]
assets = { directory = ".open-next/assets", binding = "ASSETS" }

Note

As shown above, you must enable the nodejs_compat compatibility flag and set your compatibility date to 2024-09-23 or later for your Next.js app to work with @opennextjs/cloudflare.

You configure your Worker and define what resources it can access via bindings in the Wrangler configuration file.

3. Update package.json

Add the following to the scripts field of your package.json file:

"preview": "opennextjs-cloudflare && wrangler dev",
"deploy": "opennextjs-cloudflare && wrangler deploy",
"cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"

• preview: Builds your app and serves it locally, allowing you to quickly preview your app running locally in the Workers runtime, via a single command.
• deploy: Builds your app, and then deploys it to Cloudflare
• cf-typegen: Generates a cloudflare-env.d.ts file at the root of your project containing the types for the env.

4. Optionally add caching

Caching is actively being worked on. It is fully functional for development and we are working on an optimized implementation suitable for production.

For more details check the relevant official Open Next documentation ↗.

5. Develop locally

You can continue to run next dev when developing locally.

6. Preview locally your application and create an OpenNext config file

In step 3, we also added the npm run preview script, which allows you to quickly preview your app running locally in the Workers runtime, rather than in Node.js. This allows you to test changes in the same runtime that your app runs in, when deployed to Cloudflare:

npm run preview

This command will build your OpenNext application, also creating, if not already present, an open-next.configs.ts file for you. This is necessary if you want to deploy your application with a GibHub/GitLab integration as presented in the next step.

7. Deploy to Cloudflare Workers

Either deploy via the command line:

npm run deploy

Or connect a GitHub or GitLab repository, and Cloudflare will automatically build and deploy each pull request you merge to your production branch.

---

Static assets

You can serve static assets your Next.js application by placing them in the ./public/ directory. This can be useful for resource files such as images, stylesheets, fonts, and manifests.

By default, Cloudflare first tries to match a request path against a static asset path, which is based on the file structure of the uploaded asset directory. This is either the directory specified by assets.directory in your Wrangler config or, in the case of the Cloudflare Vite plugin, the output directory of the client build. Failing that, we invoke a Worker if one is present. If there is no Worker, or the Worker then uses the asset binding, Cloudflare will fallback to the behaviour set by not_found_handling.

Refer to the routing documentation for more information about how routing works with static assets, and how to customize this behavior.