How to Deploy Next.js to Cloudflare Pages in 5 Minutes

Deploying a Next.js application to Cloudflare allows you to host your website on a global network of servers for high performance and low latency. By using the Cloudflare Pages platform, you can connect your GitHub repository and go live in under 5 minutes with automatic scaling and SSL (Secure Sockets Layer - a security technology that encrypts the connection between a browser and a website). This setup is often completely free for personal projects and small applications.

Why use Cloudflare for Next.js hosting?

Cloudflare runs one of the largest networks in the world, which means your site loads from a server physically close to your visitor. This reduces "latency" (the time it takes for data to travel from the server to the user). Unlike traditional servers, Cloudflare Pages is "serverless," so you don't have to manage any infrastructure or operating systems.

The platform also provides an integrated CI/CD (Continuous Integration/Continuous Deployment - a system that automatically builds and updates your site whenever you change your code) pipeline. Every time you push code to GitHub, Cloudflare automatically builds a new version of your site. It even creates unique "preview URLs" so you can test changes before they go live on your main domain.

In our experience, the biggest advantage is the "Edge Runtime" (a slimmed-down JavaScript environment that runs closer to users). This allows your Next.js features like "Middleware" (code that runs before a request is completed) to execute instantly. It's a great way to handle authentication or redirects without slowing down the user experience.

What do you need before starting?

Before you begin the deployment process, make sure you have the following tools and accounts ready. Having these set up ahead of time will prevent errors during the build process.

Node.js 24 or 26: You need the latest "LTS" (Long Term Support - a stable version of software guaranteed to be updated for several years) version of Node.js installed on your computer.
A GitHub Account: This is where your code will live so Cloudflare can access it.
A Cloudflare Account: You can sign up for a free account at cloudflare.com.
An existing Next.js 15+ project: If you don't have one, you can create it by running npx create-next-app@latest in your terminal (a text-based interface for giving commands to your computer).

How do you prepare Next.js for Cloudflare?

Cloudflare Pages works differently than a standard server because it uses the "OpenNext" standard to translate Next.js features into Cloudflare "Workers" (small pieces of code that run on Cloudflare's edge network). You don't need to manually configure complicated server settings.

Instead, you just need to ensure your project is compatible with the "Edge" environment. This means avoiding certain Node.js-specific libraries that don't run in a browser-like environment. Most modern Next.js features work perfectly out of the box with the Cloudflare Pages adapter.

Step 1: Open your project in your code editor.

Step 2: Open the next.config.ts (or .js) file in your project root.

Step 3: Ensure you aren't using incompatible features like "Output: Standalone." Cloudflare handles the output format automatically during the build process.

Step 4: Save your changes and push your code to a GitHub repository.

How do you connect Cloudflare to GitHub?

Once your code is on GitHub, you need to give Cloudflare permission to read it. This connection is what allows the automatic deployments to happen every time you save your work.

Step 1: Log in to your Cloudflare Dashboard and click on "Workers & Pages" in the sidebar.

Step 2: Click the "Create" button, then select the "Pages" tab and click "Connect to Git."

Step 3: Choose "GitHub" and follow the prompts to authorize Cloudflare to access your account. You can choose to give access to all repositories or just the specific one for your project.

Step 4: Select your Next.js repository from the list and click "Begin setup."

What are the correct build settings?

This is the most critical part of the process where most beginners get stuck. Cloudflare needs to know which commands to run to turn your code into a finished website.

Step 1: In the "Project name" field, give your project a name (this will also be part of your default URL, like my-project.pages.dev).

Step 2: In the "Framework preset" dropdown menu, select "Next.js." Cloudflare will automatically fill in the build command and the output directory.

Step 3: Ensure the "Build command" is set to npx @cloudflare/next-on-pages. This tool specifically optimizes Next.js 15+ for the Cloudflare environment.

Step 4: Ensure the "Build output directory" is set to .vercel/output. Even though we aren't using Vercel, this is the standard directory format that the Cloudflare adapter uses to find your built files.

Step 5: Click "Save and Deploy."

How do you monitor the build process?

After you click deploy, Cloudflare will start a "Build Pipeline." This is a sequence of steps where Cloudflare downloads your code, installs your "dependencies" (external code libraries your project needs to run), and compiles your site.

Step 1: Watch the "Build log" on the deployment screen. You will see text scrolling by as Cloudflare runs your commands.

Step 2: Look for the "Success" message at the bottom of the log. If the build fails, the log will show an error message (usually highlighted in red) explaining what went wrong.

Step 3: Once finished, Cloudflare will provide a "Site URL." Click it to see your live Next.js application.

What you should see: Your website should load exactly as it did on your local computer, but now it is accessible to anyone in the world.

Common Gotchas and Troubleshooting

Sometimes things don't go perfectly on the first try. Don't worry if you see an error; it's a normal part of the learning process.

Node.js Version Mismatch: If your build fails immediately, check the "Environment Variables" in the Cloudflare settings. You may need to add a variable named NODE_VERSION and set it to 24 or 26 to match your local environment.
Edge Compatibility: If certain pages show a "500 Internal Server Error," it might be because you are using a library that requires a full Node.js server. Try adding export const runtime = 'edge' to the top of your page file to force it to use the Cloudflare-compatible runtime.
Environment Variables: If your site uses "API Keys" (secret codes used to talk to other services), you must add them to the Cloudflare Pages dashboard under "Settings" > "Environment Variables." They will not be automatically pulled from your local .env file for security reasons.

Next Steps

Now that your site is live, you can explore more advanced features like "Custom Domains" to use a .com address instead of the .pages.dev extension. We've found that setting up "Web Analytics" within the Cloudflare dashboard is also a great next step, as it gives you privacy-friendly data on how many people are visiting your site.

You might also want to look into "Cloudflare KV" (Key-Value storage - a simple database for storing small amounts of data) if your app needs to save user preferences or simple settings without a complex database.

For more detailed guides, visit the official Next.Js documentation.