Get Your Next.js App Live, The Easy Way: Deploying to Cloudflare Workers

Ever wanted to get your personal portfolio, online CV, a cool hobby app, or even a smaller-scale production application online without breaking the bank or spending hours wrestling with server configurations? Whether you're whipping up something with React, Next.js, or just plain old static HTML, CSS, and JavaScript files, getting your project live can often feel like climbing Mount Everest in flip-flops.

But here’s the good news! If you're a developer looking for a straightforward, free, and incredibly fast way to deploy your web projects, then you're in for an absolute treat. In this article, we’ll dive into how to deploy a Next.js application to Cloudflare Workers – it's an absolute doddle, and something you can sort out for free in a matter of minutes.

Why Cloudflare Workers Are a Brilliant Fit for Next.js

Cloudflare Workers provide a serverless execution environment that's practically tailor-made for Next.js applications. Here’s why you should be excited:

• Generous Free Tier: Cloudflare Workers come with a remarkably generous free tier. You get 100,000 requests per day, which works out to roughly 3 million requests a month. For most personal projects and even many smaller production applications, this is more than ample.

• Global Reach, Lightning Speed: Your application is deployed to Cloudflare's sprawling global network. This means your users, no matter where they are on the planet, will experience lightning-fast load times. It’s like having a top-tier Content Delivery Network (CDN) built right in.

• Remarkable Simplicity: As you'll soon see, the deployment process is incredibly simple and well-documented. No arcane commands or complex server setup.

• Automatic Scalability: Forget about server management headaches. Cloudflare Workers automatically scale with your traffic, effortlessly handling spikes in visitors without you lifting a finger.

• Comprehensive Next.js Feature Support: Thanks to the OpenNext adapter, most of Next.js’s powerful features – including the App Router, Pages Router, Server-Side Rendering (SSR), Static Site Generation (SSG), Server Actions, and more – are fully supported.

Understanding the Free Tier: How Many Visitors Can You Expect?

Let's demystify those 100,000 requests per day. This is the total number of times your Worker code can be invoked within a 24-hour period.

• Monthly Allowance: Over a standard 30-day month, that's a whopping: 100,000 requests/day * 30 days = 3,000,000 requests/month

• Page View Estimation: It's tricky to give an exact number of visitors because each user interacts differently, leading to varying numbers of requests (for HTML, CSS, JavaScript, images, API calls, etc.). However, for a typical Next.js application, if we assume each page view generates, say, 5 to 10 individual requests:

  • At 5 requests per page view: 100,000 requests/day / 5 requests/page view = 20,000 page views/day

  • At 10 requests per page view: 100,000 requests/day / 10 requests/page view = 10,000 page views/day

This means your free tier can comfortably handle anywhere from 10,000 to 20,000 daily page views for a relatively simple application. That's a serious amount of traffic for a free service, making it genuinely ideal for your portfolio, online resume, or even a new app that's just finding its feet.

Getting Started: Your Free Next.js Template

While you’ll likely be deploying an existing application, if you’re looking for a quick boilerplate to get started, the official create-next-app tool is your best friend. It provides a clean, functional Next.js application structure that you can then easily customise.

Just run this in your terminal:

Bash

npx create-next-app my-new-project

Deploying Your Existing Next.js App to Cloudflare Workers: A Step-by-Step Guide

This guide focuses on getting an application you’ve already built up and running on Cloudflare Workers. It’s a very common scenario, and thankfully, it’s incredibly straightforward.

Note: While we'll be using npm for our commands, feel free to substitute with your preferred package manager (e.g., yarn or pnpm) if you're more comfortable with it. The core principles remain the same!

Step 1: Get Yourself a Cloudflare Account and Log In

1. Head to the Cloudflare Website: Open your web browser and pop over to cloudflare.com.

2. Sign Up or Log In: If you're new to Cloudflare, click "Sign Up" and follow the simple steps to create your free account. Already a member? Just hit "Log In."

3. Cloudflare Dashboard: Once you're in, you'll land on your Cloudflare dashboard. This is your command centre for managing domains, Workers, and all the other fantastic Cloudflare services.

Step 2: Prepare Your Next.js Project for Cloudflare Workers

Now, let's get your Next.js app ready for its new home.

1. Open Your Project in Your Terminal: Navigate to the root directory of your Next.js project using your favourite terminal application.

2. Install the OpenNext Cloudflare Adapter: This is the clever bit that makes your Next.js app play nicely with Cloudflare Workers.

   Bash

    npm install @opennextjs/cloudflare@latest
   

3. Install the Wrangler CLI: Wrangler is Cloudflare’s official command-line interface tool, essential for developing and deploying Workers.

   Bash

    npm install -D wrangler@latest
   

4. Create Your wrangler.jsonc File: In the root of your project, create a file named wrangler.jsonc. This file tells Cloudflare how to build and run your Worker.

   JSON

    // wrangler.jsonc
    {
      "main": ".open-next/worker.js",
      "name": "my-next-app-super-project",
      "compatibility_date": "2025-03-25",
      "compatibility_flags": [
        "nodejs_compat"
      ],
      "assets": {
        "directory": ".open-next/assets",
        "binding": "ASSETS"
      }
    }
   

   A Couple of Critical Notes:

   • name: This is crucial! Replace "my-next-app-super-project" with a unique name for your project. This name will become part of your .workers.dev subdomain (e.g., https://my-next-app-super-project.your-username.workers.dev).

   • compatibility_date: Make absolutely sure your compatibility_date is 2024-09-23 or later (the 2025-03-25 we've provided is perfect). Also, enabling the nodejs_compat flag is vital for your Next.js app to function correctly with the OpenNext adapter.

5. Add an open-next.config.ts File: In your project's root, create this file. For a basic setup, the default configuration is perfectly fine, but this is where you’d add advanced OpenNext settings if needed.

   TypeScript

    // open-next.config.ts
    import { defineCloudflareConfig } from "@opennextjs/cloudflare";
   
    export default defineCloudflareConfig();
   

6. Update Your package.json Scripts: Open up your package.json file and add the following scripts to the "scripts" section. These will make building, previewing, and deploying your application a breeze.

   JSON

    "scripts": {
      // Keep your existing scripts here (e.g., "dev", "build", "start", "lint")
      "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
      "deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
      "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
    },
   

Step 3: Develop Locally (The Usual Way)

You can carry on developing your Next.js application exactly as you normally would. The standard Next.js development server offers the best experience with super-fast refresh and excellent debugging capabilities.

Bash

npm run dev

This will typically start your application on http://localhost:3000.

Step 4: Test and Preview Your Site with the Cloudflare Adapter

Before you unleash your app onto the world, it's always a smart move to see how it behaves in the Cloudflare Workers environment. The preview script will build your app specifically for Cloudflare and then run it locally using Wrangler.

Bash

npm run preview

When you run this command, it will:

1. Build your Next.js application, optimised for Cloudflare Workers.

2. Fire up a local preview server that cleverly mimics the Cloudflare Workers environment.

You can then open your browser, usually at http://localhost:8787, to check everything is working precisely as you'd expect. This step is absolutely invaluable for catching any environment-specific quirks before you go live.

Step 5: Deploy Your Project to Cloudflare – The Grand Finale!

You’ve tested, you’ve previewed, and now you’re ready for the big moment!

1. Authenticate Wrangler with Cloudflare: The very first time you attempt a deployment, Wrangler will need to link up with your Cloudflare account. Just follow the clear instructions in your terminal – it’ll usually open a browser window for you to log in to Cloudflare and grant Wrangler the necessary permissions.

2. Deploy Your Application:

   Bash

    npm run deploy
   

   This magical command will:

   1. Perform a final build of your Next.js application using the OpenNext adapter.

   2. Upload the freshly built application to Cloudflare Workers.

Upon successful deployment, Wrangler will provide you with the URL of your shiny new application. It’ll typically look something like https://your-project-name.your-username.workers.dev.

And just like that, your Next.js application is live on Cloudflare Workers!

What's Next? Finding Your Worker and Adding a Custom Domain

Once your deployment is complete, head over to your Cloudflare dashboard:

1. Navigate to Workers & Pages: On the left-hand sidebar, find and click on "Workers & Pages."

2. Find Your Worker: You should see your newly deployed Worker listed there, named exactly what you set in your wrangler.jsonc file (e.g., my-next-app-super-project).

3. Add a Custom Domain: Click on your Worker's name to go to its settings page.

   • On the Worker's page, navigate to the "Settings" tab.

   • Scroll down to the "Domains & Routes" section.

   • Here, you'll see an option to "Add custom domain." Follow the prompts to connect your own domain (e.g., myawesomeportfolio.com) to your deployed Next.js application. Cloudflare makes the DNS setup incredibly simple, usually by adding a CNAME record.

Beyond the Basics

• CI/CD Integration: For the ultimate in streamlined development, consider integrating your npm run deploy command into a continuous integration/continuous deployment (CI/CD) pipeline. Tools like GitHub Actions or GitLab CI/CD can automatically deploy your app whenever you push changes to your main branch.

Happy deploying!