Tutorial: Deploy Your CONTENTFORGER App to Cloudflare Pages Free

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 main

Step 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-pages

In 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, Clerk, 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.

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 Vercel Pro at twenty a month per user, this is a meaningful saving, especially for projects that are not yet profitable.

What you lose vs Vercel

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 Vercel.

None of these are dealbreakers. They are trade-offs for the cost.

When to not use Cloudflare Pages

Complex middleware that relies on specific Vercel runtime features. In those cases, stay on Vercel.

Projects where the team already pays for Vercel Pro. The marginal saving is not worth the migration effort.

Everything else: Cloudflare Pages is the better default for cost.