Deploy to Cloudflare

Deployment Process

1. Modify all page files (page.tsx) and API files (route.ts) in the app directory

Add this line:

export const runtime = "edge";

2. Create a .env.production file in the project root directory

cp .env.example .env.production

Update all configurations in the .env.production file with production environment settings.

3. Create a wrangler.toml file in the project root directory

cp wrangler.toml.example wrangler.toml

Copy the production environment variables configured in .env.production to the [vars] section in wrangler.toml, and modify the project name in wrangler.toml

4. Deploy to Cloudflare

Run the following command in the project root directory:

npm run cf:deploy

Follow the prompts to enter the project name and branch name (main), connect to your Cloudflare account, and wait for the deployment to complete.

5. Go to the Cloudflare console to see your successfully deployed project

6. Access the project

You can access the project using the default generated domain. Bind a custom domain to officially launch.

References

• Deploy NextJS Applications on Cloudflare
• Migrate NextJS Applications from Vercel to Cloudflare