Loading video player...
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/workers/ https://developers.cloudflare.com/workers/framework-guides/web-apps/nextjs/ 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