Next.js on Cloudflare: Deploy to the Edge with a Single git push
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: https://dash.cloudflare.com/sign-up
Tools mentioned:
https://developers.cloudflare.com
https://developers.cloudflare.com/wor...
https://developers.cloudflare.com/wor...
https://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