☁️ How to Host Your Next.js App on Cloudflare Pages (for Free)

If you’re looking for a blazing-fast, globally distributed, and free way to host your Next.js app, then Cloudflare Pages might just be your new favorite tool.

While Cloudflare Pages is best known for hosting static sites, it also supports Next.js projects — including SSR (Server-Side Rendering) — thanks to Cloudflare Functions and its tight integration with the Pages platform.

In this guide, I’ll walk you through step-by-step how to deploy your Next.js app to Cloudflare Pages. 🚀

🔧 What You’ll Need

Before we begin, make sure you have:

A GitHub account (your code needs to be version-controlled)
A Cloudflare account (sign up at cloudflare.com)
A Next.js project (locally or already pushed to GitHub)

🛠️ Step 1: Push Your Next.js App to GitHub

If you haven’t already:

npx create-next-app my-app
cd my-app
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/my-app.git
git push -u origin main

Now your app is on GitHub, ready to be deployed.

☁️ Step 2: Set Up Cloudflare Pages

Go to Cloudflare Pages
Click “Create a Project”
Connect your GitHub account and authorize access
Select the repository for your Next.js app

⚙️ Step 3: Configure Build Settings

Cloudflare will try to auto-detect your framework. If it doesn’t, use the following settings:

Framework preset: Next.js (Static Export)
(If you’re using SSR, select “Custom”)
Build command: npm run build
Build output directory: out

If you’re using static export (next export), make sure your package.json has:

"scripts": {
  "build": "next build && next export"
}

Then click “Save and Deploy”.

⏱️ Step 4: Wait for Deployment

Cloudflare Pages will:

Clone your repo
Install dependencies
Run your build
Deploy your site

In less than a minute, your app will be live with a Cloudflare URL, something like:

https://my-app.pages.dev

⚡ Need SSR or API Routes?

Cloudflare Pages now supports Next.js Middleware and Server Functions via the Pages Functions system.

To enable this:

Run locally with:

npx @cloudflare/next-on-pages build

Then deploy as described in Cloudflare’s Next.js documentation.

🌐 Custom Domain (Optional)

Want to use your own domain instead of *.pages.dev?

Go to your Cloudflare Pages project
Click “Settings > Custom Domains”
Add your domain (Cloudflare will guide you through DNS setup)

SSL is free and automatic. 🔐

✅ Final Thoughts

Deploying a Next.js app on Cloudflare Pages gives you:

Free global CDN
Super fast load times
Serverless support for advanced Next.js features
Easy CI/CD with GitHub

If you’re building blogs, portfolios, or full-on apps with API routes — Cloudflare Pages can handle it.