Deploying Next.js on Cloudflare Workers: A Complete Guide

After deploying multiple Next.js applications on traditional Node.js servers, I decided to explore the edge computing paradigm with Cloudflare Workers. The journey was enlightening, and the performance gains were substantial.

Why Cloudflare Workers?

Cloudflare Workers run on the edge, meaning your code executes closer to your users. This translates to:

• Lower latency: Sub-50ms response times globally
• Better scalability: Automatic scaling without configuration
• Cost efficiency: Pay only for what you use

The OpenNext Approach

The key to running Next.js on Cloudflare Workers is the OpenNext adapter. Here's my configuration that works flawlessly:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  experimental: {
    serverActions: {
      bodySizeLimit: '2mb',
    },
  },
}

module.exports = nextConfig

Challenges and Solutions

1. Bundle Size Limitations

Cloudflare Workers have strict size limits. Here's how I optimize:

// Use dynamic imports for heavy libraries
const HeavyComponent = dynamic(
  () => import('@/components/HeavyComponent'),
  { 
    loading: () => <Skeleton />,
    ssr: false 
  }
)

2. Edge Runtime Compatibility

Not all Node.js APIs work on the edge. I've created this compatibility layer:

// utils/edge-compat.ts
export const getEnvironment = () => {
  const isEdge = typeof EdgeRuntime !== 'undefined'
  
  return {
    isEdge,
    storage: isEdge ? getR2Storage() : getS3Storage(),
    cache: isEdge ? getKVCache() : getRedisCache()
  }
}

Performance Optimizations

Image Optimization

Cloudflare's image transformation API integrates beautifully with Next.js:

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  loader={({ src, width, quality }) => {
    return `https://images.your-domain.com/cdn-cgi/image/w=${width},q=${quality || 75}/${src}`
  }}
/>

Caching Strategy

Implementing proper caching headers dramatically improves performance:

export const config = {
  runtime: 'edge',
}

export default async function handler(req: Request) {
  return new Response(JSON.stringify(data), {
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 's-maxage=3600, stale-while-revalidate',
    },
  })
}

Real-World Performance Metrics

After migrating to Cloudflare Workers:

• TTFB: Reduced from 250ms to 45ms (82% improvement)
• Core Web Vitals: All green across the board
• Cost: 60% reduction in hosting costs

Gotchas to Watch Out For

1. No long-running processes: Workers timeout after 30 seconds
2. Database connections: Use connection pooling or Cloudflare D1
3. File uploads: Limited to 100MB per request

Conclusion

Deploying Next.js on Cloudflare Workers has been transformative for my applications. The combination of edge performance and Next.js's developer experience creates a powerful platform for modern web applications.

The future of web development is at the edge, and Cloudflare Workers with Next.js is leading the charge.

---

Want to discuss edge computing strategies? Let's connect!