Development Workflow

The primary purpose of @opennextjs/cloudflare is to take a Next.js application, built with standard Next.js tooling, and convert it into a format compatible with Cloudflare Workers.

This code transformation process takes some time, making the adapter less than ideal for active application development, where a very fast feedback loop and other quality-of-life features, such as Hot Module Replacement (HMR), are crucial. Fortunately, Vercel already provides excellent tooling for this workflow, which Next.js developers are likely already familiar with.

We recommend that developers continue using the tools they are already comfortable with for local development and then use @opennextjs/cloudflare when they are ready to deploy their applications to the Cloudflare platform.

Let's explore, in more detail, the application development workflow we recommend for the best developer experience.

Create a new application based on a template

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

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

Develop locally using next dev

We believe that the best development workflow uses the next dev command provided by Next.js.

To access Cloudflare resources using the getCloudflareContext API while running next dev, you will need to update the Next.js configuration to call initOpenNextCloudflareForDev, as shown in the following example:

// next.config.ts
import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  /* config options here */
};
 
export default nextConfig;
 
import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
initOpenNextCloudflareForDev();

wrangler dev and wrangler deploy

After you've finished iterating on your Next.js application with next dev, you can convert it to a Cloudflare Worker by running the opennextjs-cloudflare command. This will generate the Worker code in the .open-next directory.

You can then preview the app locally in the Cloudflare Workers runtime or deploy it to the Cloudflare network.

To preview your worker locally, run the wrangler dev command. This creates a local server that runs your worker in the Cloudflare Workers runtime. Testing your worker is important to ensure that it has been properly built and is working as expected.

Once you've tested your worker, You can run wrangler deploy, and in a matter of seconds, your masterpiece will be available to all your users around the world.