Deploying Next.js 16 to the Edge: A Complete Guide

The Stack

This portfolio is built for speed and resilience, utilizing a modern, edge-native stack:

• Next.js 16: The latest React framework for high-performance web applications.
• OpenNext: A powerful adapter that optimizes Next.js for the Cloudflare Workers runtime.
• Cloudflare Workers: Global, low-latency execution at the edge with zero cold starts.
• Cloudflare R2: Scalable object storage for serving images and assets directly from the global network.

1. Provisioning Infrastructure

Before shipping, we need to set up our object storage. This can be done entirely through the wrangler CLI.

Object Storage (R2)

Used for serving images and larger assets directly from the edge.

# Create the bucket
npx wrangler r2 bucket create eltifi-assets

2. Configuration (wrangler.toml)

The wrangler.toml file is the heart of the deployment. It binds our infrastructure to the application code.

name = "eltifi"
main = ".open-next/worker.js"
compatibility_date = "2025-11-01"
compatibility_flags = ["nodejs_compat"]

# Custom Domain Routing
[[routes]]
pattern = "eltifi.com"
custom_domain = true

[[routes]]
pattern = "www.eltifi.com"
custom_domain = true

# Bindings
[[r2_buckets]]
binding = "ASSETS"
bucket_name = "eltifi-assets"

[assets]
directory = ".open-next/assets"
binding = "OPENNEXT_STATIC_ASSETS"

3. The Build & Sync Pipeline

We use a custom asset synchronization script to ensure our R2 bucket is always in sync with our local assets/ folder, converting images to WebP on the fly for better performance.

# 1. Build the Next.js application via OpenNext
pnpm build:worker

# 2. Sync assets to R2
pnpm assets:sync

# 3. Deploy to the global edge
npx wrangler deploy

Conclusion

By targeting the edge directly, we eliminate traditional server maintenance and achieve world-class performance. This setup ensures that the application is not only fast but also highly resilient and cost-effective, running entirely on Cloudflare's global infrastructure.