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

This is a simple getting started guide for a more detailed documentation on how the to use the Cloudflare Open Next adapter visit the Open Next website ↗.

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 --experimental

pnpm

pnpm create cloudflare@latest my-next-app --framework=next --experimental

yarn

yarn create cloudflare my-next-app --framework=next --experimental

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.

When using Workers Assets, Cloudflare will first attempt to serve any static assets which match the incoming request.

For example, if you have requests for /logo.png and /blog/hello-world.html in your assets directory, and make requests for /logo.png and /blog/hello-world, those files will be served respectively. The html_handling option allows you to customize the serving of HTML files if you have specific needs around redirects and trailing slashes.

If a request does not match a static asset, Cloudflare will then invoke your Worker script module, if one is present. This can be configured with the main property in the Wrangler configuration file.

Finally, if a request does not match any static assets, and either a Worker script module is not present, or from within that Worker script module, the asset binding's fetch method is called (e.g. env.ASSETS.fetch(request)), Cloudflare will fall back to evaluating the not_found_handling behavior. By default, it will serve a null-body 404-status response, but this can be configured to instead serve custom HTML 404 pages, or to serve a single-page application (SPA).

At present, there is no way to customize this routing behavior beyond the html_handling and not_found_handling options. We plan to offer additional configuration controls, such as allowing you to always run the Worker script modules for certain paths, in the future.