How to Deploy Next.js to Cloudflare Pages for Free (2026)

Netlify's 100GB bandwidth limit can burn through fast. Cloudflare Pages offers unlimited bandwidth for free. Here's how to deploy your Next.js app.

Why Cloudflare Pages?

Step 1: Enable Static Export

// next.config.ts
const nextConfig = {
  output: "export",
};
export default nextConfig;

Note: Static export means no SSR. Use Cloudflare Functions for API routes instead.

Step 2: Move API Routes to Cloudflare Functions

Create functions/api/generate.js:

export async function onRequestPost(context) {
  const { request, env } = context;
  const { prompt } = await request.json();

  const res = await fetch(
    `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${env.GEMINI_API_KEY}`,
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        contents: [{ parts: [{ text: prompt }] }],
      }),
    }
  );

  const data = await res.json();
  const text = data?.candidates?.[0]?.content?.parts?.[0]?.text || "";
  return new Response(JSON.stringify({ text }), {
    headers: { "Content-Type": "application/json" },
  });
}

Step 3: Build and Deploy

npm run build
npx wrangler pages deploy out --project-name my-app

Step 4: Set Environment Variables

Go to Cloudflare Dashboard → Pages → your project → Settings → Environment Variables.

Add GEMINI_API_KEY as a secret.

Step 5: Custom Domain (Optional)

Pages → Custom domains → Add domain → follow DNS instructions.

That's It!

Your app is live with:

• Unlimited bandwidth
• Global edge network
• Serverless API functions
• Free SSL

I migrated 3 projects from Netlify to Cloudflare and haven't looked back.

Building AI tools on Cloudflare? Check out my projects:

• EcoSense AI — Carbon footprint analyzer
• MaxAI Writer — Free AI writing tools
• PromptCraft AI — AI prompt generator