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?

Cloudflare Developers

Cloudflare Workers에 Next.js 앱 배포 소개

속도와 성능 향상을 위해 Cloudflare Workers에 Next.js 애플리케이션을 배포하는 방법에 대한 개요입니다.

Cloudflare Workers는 자동 확장을 처리하고 Workers KV, 내구성이 있는 개체, Workers AI와 같은 서버리스 기술에 대한 액세스를 제공합니다.

블로그-스타터` 템플릿을 `npx create-next-app`과 함께 사용합니다.

npm run dev`를 사용하여 로컬에서 애플리케이션을 실행하고 기능을 확인합니다.

Cloudflare Workers용 애플리케이션 구성하기

다음/어댑터-클라우드플레어` 패키지 설치하기.

환경설정을 위해 `wrangler.toml`을 생성하고 빌드 에셋 디렉터리(`_next/`)를 지정합니다.

기본 구성으로 `next.config.js`를 만듭니다.

package.json`에 빌드, 개발, 미리보기 및 배포 스크립트를 추가합니다.

'npm run preview:cloudflare-workers'를 사용하여 로컬 미리 보기를 실행하여 Cloudflare Workers 내에서 애플리케이션을 테스트합니다.

npm run deploy:cloudflare-workers`를 사용하여 애플리케이션을 배포하고 배포된 링크를 얻습니다.

배포된 애플리케이션에 액세스하고 Cloudflare 대시보드를 통해 애플리케이션을 관리합니다.

엣지 캐싱 및 Workers KV로 성능 향상(설명에 제공된 링크).