How to Deploy a Next.js Website to Cloudflare Pages: A Step-by-Step Guide

In modern web development, Next.js has established itself as one of the leading React frameworks thanks to its support for Server-Side Rendering (SSR), Static Site Generation (SSG), and exceptional developer experience. However, once your product is ready, the next question is always: Where should you deploy your Next.js application for maximum speed, optimal cost, and high reliability?

While Vercel is often the default choice for many developers, Cloudflare Pages has emerged as a formidable alternative powered by one of the world's most expansive Edge Networks. This guide will walk you through deploying a Next.js web application to Cloudflare Pages seamlessly from scratch.

1. Why Choose Cloudflare Pages for Next.js Deployment?

Cloudflare Pages is more than just static web hosting—it is a robust JAMstack platform deeply integrated with Cloudflare's global Edge network. Here are the key advantages of choosing Cloudflare Pages:

• Unlimited Bandwidth: Unlike many platforms that enforce strict bandwidth limits on free tiers, Cloudflare Pages provides unlimited bandwidth, giving you peace of mind during traffic spikes.
• Blazing Fast Edge Speeds: With over 300 data centers worldwide, your website content is cached and delivered from locations closest to your users, reducing latency to near zero.
• Automated CI/CD Integration: Every time you push new code to GitHub or GitLab, Cloudflare Pages automatically builds and deploys your application within seconds.
• Support for Next.js SSR & Server Actions: Using the official @cloudflare/next-on-pages adapter, you can run full Next.js App Router features with Edge SSR rather than being limited to static exports.
• Generous Free Tier: The Free plan offers up to 500 builds per month with no limits on requests or visitor traffic.

2. Prerequisites

Before getting started, make sure you have the following ready:

1. A working Next.js project running locally.
2. Your source code pushed to a GitHub or GitLab repository.
3. A free Cloudflare account.

3. Step-by-Step Deployment Guide

Step 1: Push Your Next.js Project to GitHub

Make sure your Next.js project code is saved and pushed to a GitHub repository:

Step 2: Connect Your Repository to Cloudflare Pages

1. Log in to your Cloudflare Dashboard.
2. In the left sidebar, navigate to Workers & Pages and select the Pages tab.
3. Click Connect to Git.
4. Authorize Cloudflare to access your GitHub or GitLab account, then select your Next.js repository.

Step 3: Configure Build Settings

Set up the build configuration based on the approach selected in Step 1:

💡 Pro Tip: Under Environment variables, add NODE_VERSION and set it to 20.x (or 18.x) to ensure Cloudflare Pages builds your project with a modern and compatible Node.js version.