Uploaded December 2025 | Updated September 2026, 4 days ago

---

Want the speed and developer experience of Next.js combined with the global network of Cloudflare? This tutorial walks you through bootstrapping a Next.js app, deploying it to Cloudflare's edge with a simple git push, setting up automatic preview deployments, and adding Next.js middleware with rich Cloudflare request data. All 100% on the free plan!

Create an account on Cloudflare today for free: dash.cloudflare.com/sign-up

Tools mentioned:
developers.cloudflare.com
developers.cloudflare.com/workers
developers.cloudflare.com/workers/framework-guides/web-apps/nextjs
opennext.js.org/cloudflare

Chapters:
00:00 - Introduction to Next.js on Cloudflare with Worker Builds
00:27 - Bootstrapping and Deploying the Next.js Application
01:17 - Connecting to GitHub for Simple Git Push Deployment
02:41 - Configuring Build and Deploy Commands
03:16 - Making a Change and Deploying via Git Push
04:37 - Implementing Preview Deployments
06:54 - Using Cloudflare's Rich Request Properties in Middleware
07:22 - Creating the Middleware File
07:51 - Importing getCloudflareContext
08:14 - Setting the Country Header in Middleware
09:29 - Configuring the Middleware Matcher
09:47 - Accessing the Header in page.tsx
10:39 - Viewing the Final Result
10:45 - Summary and Conclusion

#cloudflare #cloudflareworkers #developer