Notes on deploying to Cloudflare Pages

Deploying a statically exported Next.js site to Cloudflare Pages provides exceptional global distribution, sub-second deployment times, and built-in SSL. Here are practical notes on configuring static exports correctly.

Configuring Next.js Export Mode

Cloudflare Pages hosts static assets directly from your build artifact directory. In next.config.js, specify output: 'export' so next build outputs a standalone static HTML directory inside /out.

// next.config.js
module.exports = {
  output: 'export',
  images: {
    unoptimized: true, // Required for static HTML exports
  },
};

Build Command Setup

In your Cloudflare Pages dashboard project settings, set the build environment configuration as follows:

• Build command: npm run build
• Build output directory: out
• Node.js version: 20.x or higher

# Cloudflare automatically runs your custom build script
npm run build # triggers translation generation, then Next.js static build

Clean URLs and Header Directives

Cloudflare Pages handles clean URL routing natively (/slug mapping to /slug/index.html or /slug.html). You can also place a _headers file inside your /public folder to configure cache-control headers, security policies, and asset compression at the edge level.