Cloudflare Pages hosts Next.js apps with a generous free tier. For many ContentForger projects, you will never pay for hosting. Here is the deploy, step by step.
What you need
- A ContentForger-generated app, running locally.
- A Cloudflare account (free to sign up).
- Your code in a GitHub repo.
Step one: push to GitHub
If you have not already:
cd your-contentforger-project
git init
git add .
git commit -m "initial commit"Create a new repo on github.com. Then:
git remote add origin https://github.com/you/your-repo
git branch -M main
git push -u origin mainStep two: install the Cloudflare adapter
ContentForger outputs standard Next.js. Cloudflare Pages needs a small adapter to run it.
pnpm add -D @cloudflare/next-on-pagesIn package.json, add a build script:
"scripts": {
"build": "next build",
"pages:build": "npx @cloudflare/next-on-pages",
"pages:deploy": "wrangler pages deploy .vercel/output/static"
}Commit and push.
Step three: connect Cloudflare Pages to your repo
In Cloudflare dashboard, go to Workers & Pages. Click Create, then Pages tab, then Connect to Git.
Authorise GitHub. Select your repo.
Build settings:
- Framework preset: Next.js
- Build command: pnpm run pages:build
- Build output directory: .vercel/output/static
- Environment variables: add every variable from your .env.local
Click Save and Deploy.
Step four: first build
Cloudflare clones your repo, installs dependencies, runs the build. First build takes three to five minutes.
If it succeeds, you get a URL like your-app.pages.dev. Open it. Your app should load.
If it fails, click the build log. Most common issues:
- Missing env variables. Add them and retry.
- Node version mismatch. Add NODE_VERSION=20 to env vars.
- Build command wrong. Double-check the command above.
Step five: custom domain
When ready to use a real domain:
In your Pages project, go to Custom domains. Add your domain.
If the domain is already managed by Cloudflare, one click and you are done.
If elsewhere, Cloudflare gives you a CNAME to add. Once DNS propagates, your site is live on the real domain.
Step six: production env variables
Any env variable you need in production must be added in the Cloudflare Pages dashboard under Settings, Environment variables.
Do this for both Production and Preview environments.
Do not commit .env.local to git. It is already in .gitignore for ContentForger outputs. Confirm that.
Step seven: webhooks
If your app has webhook endpoints (Stripe, Resend), update the webhook URLs in those services to point to your new Cloudflare URL.
A webhook pointing to localhost or an old URL fails silently and creates confusing bugs. Update these before you go live.
Supabase Auth is not a webhook, but it has the same trap. In Supabase, open Authentication, URL Configuration, set the Site URL to your Cloudflare URL and add it to Redirect URLs. Otherwise confirmation emails and sign-in links send people back to localhost.
Ongoing deploys
From here, every push to main triggers a new deploy. Preview deploys happen for every other branch and pull request.
To roll back, go to Deployments in your Pages project and click Rollback next to any previous deploy.
The cost reality
Cloudflare Pages free tier: five hundred builds per month, unlimited bandwidth, unlimited requests.
A typical SaaS project pushes to main a few times a day. That is under a hundred builds a month. You will never hit the cap.
Bandwidth and requests are unlimited on the free tier. Your app can serve a million visitors a month on the free tier.
For most ContentForger projects, hosting costs nothing until you hit enterprise scale. Compared to typical paid hosting tiers at twenty a month per user, this is a meaningful saving, especially for projects that are not yet profitable.
What you trade off
Image optimisation is slightly less seamless. Some advanced Next.js features (like specific middleware patterns) work but need attention. Build times on Cloudflare are sometimes longer than on other hosts.
None of these are dealbreakers. They are trade-offs for the cost.
When to not use Cloudflare Pages
Complex middleware that relies on a fully native Next.js runtime. In those cases, test carefully or pick a host with first-class Next.js support such as Netlify.
Projects where the team is already committed to another host. The marginal saving is not worth the migration effort.
Everything else: Cloudflare Pages is the better default for cost.
