Next.js on Cloudflare: Deploy to the Edge with a Single git push

You want the developer experience of Next.js, but the global network of Cloudflare. Well, thanks to Openext, you can. In this video, we'll bootstrap a Next.js application and deploy it to Cloudflare's edge with a simple get push. Then I'll show you preview deployments. We'll even add some middleware attaching the visitors country to the request headers. Sounds fun? Let's do it. We're going to start here from our worker docs, especially the page about Nex.js. And in here, you can see we support almost all Nex.js features currently available. We'll copy this command and we'll paste it in our shell. I'm going to change the name from my next app to my next app. Whoa, whoa, whoa, whoa. It will install the dependencies wrangler. We'll use git for version control and we'll actually also immediately deploy our application. I'll choose my cloudflare account, my employee account. I have multiple accounts and then it will deploy nextjs to cloudflare. Great. Within a couple minutes, we deployed a nextg application to Cloudflare with a single command. Now, I mentioned we were going to do this with a simple get push. And in order to do so, we have to publish this repository to either GitHub or GitLab. I'll use GitHub, but they both work. So, I'm going to go to GitHub and I'll click new repository. And we will call this my next app. Wo wo. No description, but we'll make it private. And we'll create the repository. All right. Then we can follow these instructions. Remote at origin. So, here you see we're inside of our app. remote at origin get branch and main and finally we'll push domain. Now if I refresh the page it should have our app. Cool. Now the next step is to go to our workers page. And if I refresh it should show me my next app. Wo wo. So I'm going to go to this app. Click on settings. And if I scroll down there should be a build. This is worker build which is awesome. For me, it currently shows Git because I've already connected my GitHub. If you haven't done so, it will show you a GitHub icon or a GitLab icon. You connect one of the two. But because I'm already authenticated, I'm just going to connect this new repository with this worker. The repository, it picked my last one was next. Wo wo. The branch is main. And now this is important. The build command will be pmppm run build but the deploy command will be pnpm run deploy not the default wrangler deploy because pmppm actually runs open next first and then deploys the assets and then for preview deployments we're going to go non-production deploy command and we'll say pmppm run upload which will which will upload the assets to our preview deployment URL. All right, let's press connect. And now we can push a commit and it will start the build automatically. So I'm going to open up my editor here and I'm going into page.tsx. And as you can see here, we have these list items. So I'm going to copy this list item. So I'm going to go to S here and I'm going to say deploy to Cloudflare and I'll save it and then we'll see if it works. The pmppm rundev. So this runs the local dev server. As you can see, it's very fast just like normal next.js and I'm opening it and it shows this third item deployed to Cloudflare. Great. Okay. So now I'm going to add this to git and I'm going to commit it and say welcome to Cloudflare and then I'm going to push it. Okay, now we should go back to our dashboard and it will show a new build in progress. So I'm going to click on it and we can follow the progress here. Now this can take a minute or two for the first time. All right, build completed. Now let's open up our worker here, the deployed one, and refresh. Deploy the cloud layer. Isn't that amazing? Within no time, we just push the commit to GitHub. Cloudflare worker builds built it and deployed it. It's amazing. Now, I mentioned that I'll show you preview deployments because normally you have your main branch and it should be in a pristine state, but sometimes you want to develop a feature in an environment that's more like production. And this is where preview deployments come in very handy. So I'm going back to my editor and I'm going to create a new branch for master and I'm going to create a new branch and we call this branch feature one two three. Okay. And I'll also add a new list item. So instead of just deploy the cloudflare we also want preview deployments. Save. Okay. Now I'm going to commit this and push this to our feature 1 123 branch. So commit features are great and I'll push it to feature 1 123. All right, it is pushed. Now if we go back to our dashboard and refresh, we'll see another build in progress. And this time it says branch feature 123. Features are great. And I expect this build to be a little faster cuz it's not the first one. So let's go watch this build progress. Okay, deploy command completed. So now on our preview deployment, we should be able to just exit it by adding our branch in front of the URL. So we have this one here. I'm going to duplicate it. And I believe ours was called feature 123 dash. Let's Here we go. So feature 1 123 has this preview deployments but our main branch does not. So in a short time we achieved pretty great developer experience. We pushed to main and it was deployed. Then we created a branch pushed to the branch and it was deployed as a feature. Now one caveat I'd like to mention is right now feature deployments only work on the workers.dev domains. So this thing we're working on bring it to custom domains but for now the features the feature deployments only run works.dev. Okay great this is awesome but let's go a little further. Let's add a bit more depth. So one of the many reasons to use Cloudflare's network is that you get access to vast amount of data on every request. The country the city the continent even whether the user is in the EU or not. Now, that's pretty tricky to do with a standard NodeJS application. But with our application running in Cloudflare Workers, we can easily add it to the middleware. That way, we can access it before the request even reaches our page. So, I open up my editor and I'm going to create a new file. And this new file goes here in the source. And we'll call it middleware.ts. Okay. Then the first thing, well, let's copy code from the docs because that's what everybody does, right? Let's use this one. Okay, we import the next response and the next request. And here they show a redirect, but we won't be doing any redirects. Now, we also need the Cloudflare context. So, we're going to say import get Cloudflare context from Openext Cloudflare. And this allows us to get all the information from the request that Cloudfare adds. And if we're doing servers binding in another video, you will also access access it through get cloud context. And instead of just doing a redirect first, I'm going to get the Cloudflare context. So it's stored on CF as a property on get Cloudflare context. And now we can see for example, you know, cf dot city, continent, country. So that's great. Next, we'll need the current request header. So we'll say request headers equals new headers of request headers. Okay, so this will create a new headers object from the existing headers. Then we'll say request headers do set and we'll say xx user country and that will then be cf dot or a question mark just in case it's not populated. Finally we need to return a new nextjs response with these request headers. So we'll say nextjs response next and it will take a request again. The request will have headers [snorts] and we will use our request headers. Finally the matcher is which paths you want it to match to. I'm going to be using what they have in the docs for matching all the paths which is this matcher. You can get this from the next documentation. Maybe you only want to do this on certain other pages. Uh that's just totally up to you. All right. Now, let me save this. And in our page, we can now use this, right? So, we'll turn this into a server function. And then we want to import the headers from next headers. Okay. And then we can say, okay, header list equals await headers because it's a promise. And then in our list, we can add another list item. And we'll just say hello from header list get an X user country. All right, let's open up PMP rendev. Hello from the US cuz I'm in the US. So in a short time we bootstrapped the NexJS application, deployed it to Cloudflare's edge across the globe, added preview deploy deployments, and finally used Cloudflare's rich request properties in our middleware. Oh, and all of this works on the free plan. It goes without saying it even though I just said it. Let me know in the comments what you'd like to see next. Is it Drizzle ND1 [music] adding authentication, static site generation, server side generation, incremental static rendering or server actions? Let me know. Thanks [music] for watching.