Deploying Next.js 16 to Cloudflare Workers: A Complete Architecture Guide

Learn how we built bobadilla.tech with Next.js 16, Cloudflare Workers, and D1. Full architecture breakdown with source code.

Deploying Next.js 16 to Cloudflare Workers: A Complete Architecture Guide

Building a production-ready Next.js application that's blazingly fast, globally distributed, and cost-effective is completely achievable with Cloudflare Workers. In this comprehensive guide, I'll walk you through exactly how we built bobadilla.tech, including the architecture decisions, deployment process, and performance optimizations that resulted in sub-50ms response times worldwide.

What you'll learn:

How to deploy Next.js 16 to Cloudflare's edge network using OpenNext.js
Building a TypeScript-based blog system with inline markdown
Implementing static generation for maximum performance
Integrating Cloudflare D1 (SQLite at the edge) with Drizzle ORM
SEO optimization strategies with Open Graph and structured data
Complete architecture breakdown you can replicate

This guide is for developers who want to build fast, scalable web applications on the edge without the complexity and cost of traditional infrastructure.

1. Tech Stack Overview

Let me start by explaining the technology choices and why each piece was selected for this architecture.

Core Framework: Next.js 16 with App Router

We chose Next.js 16 for several compelling reasons:

App Router stability: The App Router has matured significantly, offering better performance and developer experience than the Pages Router
Server Components: Reduce JavaScript bundle size by rendering components on the server
Turbopack: Lightning-fast development builds (5-10x faster than Webpack)
Built-in optimizations: Automatic code splitting, image optimization, and font optimization out of the box
Edge-ready: Designed to work seamlessly with edge runtimes like Cloudflare Workers

Deployment: Cloudflare Workers + OpenNext.js

Cloudflare Workers provides our edge computing layer:

275+ global locations: Your application runs closer to your users worldwide
Zero cold starts: Unlike AWS Lambda, Workers are instant (no warmup time)
Generous free tier: 100,000 requests/day free, then $0.50 per million requests
Sub-millisecond latency: Responses are served from the nearest edge location
Integrated services: D1 database, KV storage, R2 object storage, all at the edge

OpenNext.js is the bridge that makes Next.js work on Cloudflare:

Transforms Next.js build output into Worker-compatible code
Handles routing, middleware, and API routes at the edge
Manages static assets and server-side rendering
Open-source and actively maintained

2. Static Generation Strategy

Static Site Generation (SSG) is the secret sauce that makes this architecture blazingly fast.

generateStaticParams()

In src/app/blog/[slug]/page.tsx, we tell Next.js to pre-generate every blog post route at build time:

export async function generateStaticParams() {
  const slugs = await getAllSlugs();
  return slugs.map((slug) => ({ slug }));
}

What happens at runtime (Cloudflare Workers):

Unlike traditional static hosting where HTML files are served directly from a CDN, OpenNext on Cloudflare Workers works differently:

Request hits the Cloudflare Worker
Worker loads the pre-rendered HTML from the build
Worker serves the HTML through its runtime

Why this matters:

Pages ARE pre-rendered (no React rendering at runtime)
SEO-perfect: Search engines get fully-rendered HTML
Pages still go through the Worker (not pure static files)
Worker must stay under resource limits (CPU/memory)

3. Cloudflare Workers Deployment

Why Cloudflare Workers?

Performance:

Sub-50ms Time to First Byte (TTFB) from anywhere in the world
275+ edge locations: North America, Europe, Asia, South America, Africa, Oceania
Zero cold starts: Workers are always warm, unlike Lambda functions
Instant scaling: Handle traffic spikes without provisioning

Cost:

100,000 requests/day free: Perfect for small to medium traffic sites
$5/month for 10 million requests: Extremely cost-effective at scale
No bandwidth fees: Unlike AWS, you don't pay for data transfer
No idle costs: Only pay for actual requests, not reserved capacity

OpenNext.js Configuration

OpenNext.js transforms your Next.js build into Worker-compatible code.

{
  "scripts": {
    "build": "next build && opennextjs-cloudflare build",
    "cf:deploy": "wrangler deploy"
  }
}

What happens during build:

next build creates optimized production build
opennextjs-cloudflare build transforms it to Worker-compatible code
Static assets extracted to .open-next/assets/
Worker entry point created

4. Performance Optimizations

Image Optimization

We disabled Next.js image optimization for Cloudflare Workers compatibility:

// next.config.js
module.exports = {
  output: "standalone",
  images: {
    unoptimized: true,
  },
};

Lazy Loading Heavy Components

We moved THREE.js ShaderBackground to a lazy-loaded client component to reduce Worker CPU usage:

// src/components/shaders/ShaderBackgroundLazy.tsx
"use client";

import dynamic from "next/dynamic";

const ShaderBackground = dynamic(
  () => import("@/components/shaders/ShaderBackground"),
  {
    ssr: false,
    loading: () => <div className="fixed inset-0 -z-10 bg-brand-bg" />
  }
);

export default ShaderBackground;

This prevents THREE.js from executing during SSR, keeping Worker CPU usage under limits.

5. SEO Implementation

Metadata Strategy

Our src/lib/seo.ts utility generates comprehensive metadata for every page with Open Graph tags, Twitter Cards, and canonical URLs.

Sitemap Generation

Dynamic sitemap generated at src/app/sitemap.ts:

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts();
  return [
    {
      url: BASE_URL,
      lastModified: new Date(),
      priority: 1,
    },
    ...posts.map((post) => ({
      url: `${BASE_URL}/blog/${post.slug.current}`,
      lastModified: post.updatedAt || post.publishedAt,
      priority: 0.8,
    })),
  ];
}

6. Conclusion

We've built a production-ready Next.js application that's fast, scalable, cost-effective, and developer-friendly. Here's what makes this architecture special:

Performance wins:

Sub-50ms TTFB from anywhere in the world
Zero cold starts compared to traditional serverless
Static generation for instant page loads
Automatic caching on Cloudflare's CDN

Cost efficiency:

100,000 requests/day free
$5/month for 10 million requests at scale
No bandwidth charges
Included SSL certificates and DDoS protection

Developer experience:

Type-safe everything: TypeScript + Zod + Drizzle
Fast builds: Turbopack for quick iteration
Simple deployment: One command to go live

This architecture demonstrates how modern edge computing can deliver exceptional performance at a fraction of traditional infrastructure costs.

Questions or feedback? Reach out to us at ale@bobadilla.tech. Want help building your Next.js application? We offer development services and consulting — get in touch at bobadilla.tech.

Deploying Next.js 16 to Cloudflare Workers: A Complete Architecture Guide