Hey developers, my name is Confidence, and welcome to this quick guide on deploying your next.js applications to Cloudflare Workers. With Cloud Workers, you can globally deploy your next.js apps in a few simple steps and improve the speed and performance of your app by saving it

closer to your users. Plus, Workers handles scaling automatically, so you don't have to worry about traffic spikes. And the best part is you get access to other cool native serverless tech like Workers KV, Durable Objects, Workers AI, and so much more. So in this video, I'm going

to show you how to get your next.js app deployed to Cloudflare Workers. Switching over to my terminal, the first thing you want to do is you want to get a project you need deployed to Cloud. So perhaps you already have a project in mind. For this tutorial, I'm going to be

using the blog starter template. So this is going to be `npx create-next-app` and we're going to be using the `blog-starter` template example. Running this command is going to pull that template and set up the project for us locally. All right, that's done, and we can `cd` into

the uh project directory. Let's clear the screen. And to check that this works locally, you can run the `dev` script. So this is going to be `npm run dev`. All right, and we have this running on localhost:3000. Let's head over to the browser

and uh open this up. So this is going to be localhost:3000, and we have the blog running locally. And this looks fine, it works nice. All right, now let's get this deployed to Cloud Workers. Heading back to the terminal, what I'm going to do is

I'm going to quit that dev server and let's clear the screen. The first thing I'll do is install the Open Next adapter by running `npm install @next/adapter-cloudflare`. So this is going to enable our Next.js app to run inside of Cloudflare.

So let's get this installed. And it's installed. The next thing I'll do is open up this project in my text editor. And what you want to do is you want to go create a new file called `wrangler.toml`. So this is going to be

`wrangler.toml`, and this file is going to have the configuration of the app when deployed to Workers. For instance, the name of the application when deployed to Workers, and we also want to tell Cloudflare Workers what the build asset directory is, which in this case is

`_next/`, all right. That looks good. So let's save this. And then I'm going to need to create a `next.config.js` file. So that's the next thing we do. So let's go back up to the project route and create a `next.config.js` file. So this is going

to be `next.config.js`, and I just have a skeleton configuration obviously, but feel free to customize that as you wish depending on your project requirements. And lastly, we can go back to the `package.json` file, and here in the `scripts` section, we want to add a few

new scripts. So the first script I'm adding here, I'm actually adding a couple of scripts. The first one is the `build` script, followed by the `dev` script, the `preview`, and the `deploy` script, all designed to run your Next.js application inside of Workers. And the beauty of this

is that you get to see how your production Next.js application behaves in your local environment so you don't have to wait for your app to be deployed to see how it behaves when deployed to production. All right, this is lovely. Now we can save all of that, and what I'm

going to do is run a local preview of my Next.js application inside of Cloudflare Workers. So I'll be using the preview script, so this this is going to be `npm run preview:cloudflare-workers`, and that's going to run the preview worker script, and what this

does is it's going to get the application built, but instead of running the Next.js application in Node.js, it runs the Next.js application inside of Cloudflare Workers, which allows us to inspect the behavior of our application as it would in production. So we have this running on

port 8771. I'm just going to grab this URL and let's open up the browser. Let's get a new tab ready and paste that link in, and you can see we have the exact same blog running with all of the features we expect from Next.js, which is really awesome. Now

that we verified that this works as expected, we can go on to deploy this application to Cloudflare Workers. So heading back to the terminal now, I am going to stop the preview, and then we can run the deploy script. So this is going to be `npm run deploy:cloudflare-workers`, and what that does is it's going to get the application built and then have it deployed to my Cloudflare account. I'm going to select the right account I want this deployed to. All right, and that's deployed. So I'm going to grab the link of the

deployed application. Now, we can just click on that, and there we go. We have the exact same blog running on Cloudflare Workers. So it's really cool how Cloudflare Workers lets us build these production-ready Next.js applications and have them run as a serverless application.

application that has been deployed to workers that's the link over here on the terminal and let's head back to the browser and open a new tab paste this in and you see we have our Next.js blog running on workers and fully deployed. We have a production link now. The best part

is that you can head over to your Cloudflare dashboard account. I'm just going to give this a quick refresh and here you see we have the blog starter app and within the dashboard we can manage the application, like view the metrics concerning the application,

the logs, or manage other settings that we might need to do down the road, um, using this application, which is really awesome. And the best part is that's not all. You can turbocharge your app by adding edge caching with Workers KV. I'm going to leave a link in the description

to show you how to get this done. Awesome. Let me know the first Next.js project you'll be deploying to Cloudflare Workers in the comments. In the next video, I'll show you how to deploy a React application to Cloudflare, so don't forget to get subscribed

so you won't miss out. Thanks for watching. Happy coding. Have a nice day. Bye. [Music]

Seriously? Did you know you can deploy a NextJS App on Cloudflare Workers?

Scripts