Shipping a static Next.js site to Cloudflare Pages

Next.js is famous for its servers — API routes, middleware, server components. But for a portfolio, a blog, or any content site, a fully static export on Cloudflare Pages is faster, cheaper, and dramatically simpler to operate. You get a global CDN, zero cold starts, and a build that can never take your site down at runtime.

Here's the playbook I used for this very site.

Turn on the static export

In next.config.ts:

const nextConfig: NextConfig = {
  output: "export",
  images: { unoptimized: true },
};

Two things change:

• next build now emits a fully static site into out/ — HTML, CSS, and JS only.
• Image optimization needs a server, so it's disabled (unoptimized). Prefer local SVGs or tiny, already-optimized images.

What you give up (and the workaround)

The biggest loss is API routes. No /api/contact on the server — the code would never run. The trick is Cloudflare's Pages Functions: a functions/ directory at your repo root is compiled and served at the matching URL alongside your static files.

A functions/api/contact.ts file becomes a real POST /api/contact endpoint on the edge. Your secret API keys live in the Cloudflare dashboard as environment variables and never touch the client bundle.

The mental model

Static content (blog, projects, pages)  →  built once, cached everywhere
Dynamic requests (form submissions)     →  tiny edge functions, per-request

This split is the best of both worlds. The bulk of your site is immutable and infinitely cacheable; the few interactive bits run close to your visitors.

Why this wins for a personal site

• Free. Cloudflare Pages has a generous free tier with no traffic limits.
• Fast by default. Static files on a CDN beat any server-rendered response.
• Resilient. Nothing to scale, patch, or keep awake at 3 a.m.
• Easy previews. Every branch gets its own URL before merge.

If your site is mostly content, don't rent a server for it. Hand it to the edge.