Cloudflare Pages is one of the best free hosting options available right now. Global CDN, unlimited bandwidth on the free plan, automatic GitHub deploys, and custom domain support at no cost.
Here's exactly how to set it up with Next.js.
Step 1: Configure Next.js for static export
In your next.config.js, add:
const nextConfig = {
output: 'export',
trailingSlash: true,
images: { unoptimized: true },
}
module.exports = nextConfig
The output: 'export' tells Next.js to build static HTML files instead of a Node.js server.
Step 2: Push to GitHub
Cloudflare Pages deploys from a Git repository. Create a new repo and push your project.
Step 3: Connect to Cloudflare Pages
- Go to pages.cloudflare.com
- Click Create a project
- Connect your GitHub account
- Select your repository
Step 4: Configure build settings
| Setting | Value |
|---|---|
| Framework preset | Next.js (Static HTML Export) |
| Build command | npm run build |
| Build output directory | out |
Step 5: Add environment variables
Any .env variables your app needs go here. They're encrypted and injected at build time.
That's it
Every push to your main branch triggers a new deploy. Preview deployments are created automatically for pull requests. Your site is served from Cloudflare's global network with automatic HTTPS.
The entire setup takes about 10 minutes and costs nothing.