Getting Started with Next.js on Cloudflare

Why Cloudflare Pages?

Cloudflare Pages offers unlimited bandwidth, free SSL, and a global CDN — a perfect match for a static blog. Combined with Next.js's static export, you get a fast, cost-effective setup.

Setup

Install the adapter:

npm install @cloudflare/next-on-pages
npm install -D wrangler

Add to next.config.mjs:

const nextConfig = {
  output: 'export',
  images: { unoptimized: true },
  trailingSlash: true,
}
export default nextConfig

Project Structure

Keep your Markdown content under /content/{category}/:

content/
  tech/
    getting-started.md
  life/
    hello-world.md

Each file has a YAML front matter block for metadata, and the directory name becomes the category.

Front Matter Fields

Field	Required	Description
`title`	✓	Post title
`date`	✓	ISO 8601 date
`summary`	—	Short description
`tags`	—	Array of strings
`draft`	—	Hide from listing

Deploying

npm run pages:build
wrangler pages deploy

That's it. Your blog is live on the edge.

Performance Tips

Keep images under /public/ or use an external CDN
The search index is pre-built JSON — no backend required
All pages are statically generated at build time