I’ve been using Cloudflare a bit more often recently and wanted to try a fullstack nextjs app deployment. Coincidentally my latest project was a fullstack Next.js app! A daily planner/bullet journal I “vibe coded” with my new high schooler who needed some help staying organized and on top of all the homework, chores, extra-curriculars and responsibility. We had a lot of fun talking through the features and getting something workable together.

We initially used Firebase Studio for the app, but deployment was unexpectedly bumpy, and since we didn’t have any hard requirements for the Google stack, I decided to pivot and try out Cloudflare Workers using this guide in the Workers docs.

I followed the “Deploy an existing project” steps from the Cloudflare guide, adding the necessary wrangler.jsonc and open-next.config.ts files. For local development and testing, I had already adapted my package.json with working preview and deploy scripts, and cf-typegen was added upon package installation.

The real challenge started when setting up the Worker for the custom domain inside the Cloudflare dashboard.

1. Initial Build Failure (The wrangler Commands)

After registering my domain and heading to Workers > Create Application, I connected my Git repository. In the Build configuration step, the fields for the Build command, Deploy command, and Non-production branch deploy command were pre-filled with wrangler commands. I left them as-is, but the deployment failed.

2. Switching to npm Scripts (First Attempt)

My first round of searching suggested swapping the wrangler commands for npm scripts to better align with the Next.js build process.

I updated the commands in the Cloudflare Build configuration to:

• Build command: npm run build
• Deploy command: npm run deploy

This, too, failed. After checking the logs, the point of failure was consistently with the Non-production branch deploy command.

Despite the field being “Optional” I couldn’t make it blank and the default wrangler bit wasn’t working.

A bit more digging led me to the official open-next.js.org documentation, where I found a more complete set of npm commands, including a new one: upload.

From the open-next.js.org Cloudflare Guide:

“build”: “next build”, “preview”: “opennextjs-cloudflare build && opennextjs-cloudflare preview”, “deploy”: “opennextjs-cloudflare build && opennextjs-cloudflare deploy”, “upload”: “opennextjs-cloudflare build && opennextjs-cloudflare upload”, “cf-typegen”: “wrangler types –env-interface CloudflareEnv cloudflare-env.d.ts”

The tooltip for the “Non-production branch deploy command” provided the final clue: “When a build runs on a non-production branch, a new Worker version is uploaded.”

Given this was a personal project with minimal risk I just dropped in the upload command and ran it again which…worked.

For a fullstack nextjs app using Cloudflare Workers here was the winning recipe for the Build configuration:

• Build command: npm run build which runs next build
• Deploy command: npm run deploy which runs the opennextjs-cloudflare build command and then the deploy
• Non-production branch deploy command (the crucial fix): npm run upload which runs the same opennextjs-cloudflare build and then the upload

Wrapping Up

With the right build scripts in place, new commits now automatically trigger deployments and it all just…works. My highschooler has everything on her phone without another login or subscription and customized exactly how she wanted it.

I separately added a landing page before writing up this post in case anyone stumbles on to it: https://techodaily.com . Nice and snappy with no vercel hosting required.

For anyone who had the same issue I hope this seo-juiced post helped you find the fix. And one more time for the search engines 🤓:

If you’re running into similar deployment issues with Next.js on Cloudflare Workers, check your Non-production branch deploy command.