Next.js from the Ground Up with Cassidy Williams

Next.js Deployment

In this stage, we'll talk about how to deploy your Next.js projects to Netlify by exporting it to a static site.

Transcript:

[00:00:00] All right, welcome back. Let's deploy our very basic Next.js project to Netlify. [00:00:10] Now all you have to do is create a file that's called a Netlify.toml. Netlify.T-O-M-L. Now in that[00:00:20] Netlify.toml, you'll have some brackets and you'll write build on the inside of them. On the next line, you'll have a command and this command is what we'll run to actually [00:00:30] build your project and you'll do NPM run build and then NPM run export. [00:00:40] If you'll remember from your package.json, we have these scripts here. Next dev starts the application in development mode. In development mode you have things like [00:00:50] hot code reloading which again is run by React Fast Refresh. You have error reporting, all kinds of stuff that's all in next dev.

[00:01:00] Next build creates an optimized production build of your application. When you look at the output of this, if you did want to do that, you can see information about each [00:01:10] route and a bunch of other cool stuff. Now in your terminal, if you'd like to experiment with this next build command, you can actually add the flag dash dash profile [00:01:20] so that way you can see a profiler just like you would in development if you were running this build that way or you can do dash dash debug. With [00:01:30] debug, that enables a more verbose build output but that's not necessary for exporting your project to be deployed. Now with next start, this is for running your [00:01:40] project in production mode. You actually need to run next build before you run next start. You don't really need to do that for this project but it's good to have the script ready. Next export, [00:01:50] this actually bundles up the project and exports it to a static site which is what we use in the Netlify.toml here. This is what the command does. It bundles it up [00:02:00] and then it exports it to a static site. Now, once that happens, it creates a directory called out. If you do publish equals out [00:02:10] like this, this is actually all you need to get your site properly published to Netlify. Now I'm going to push all of this to a Git repository.

[00:02:20] Now that I've done that I can actually connect that to my [00:02:30] Netlify account. Let's go to the browser and go to Netlify. Click new site from Git. [00:02:40] Now you can connect whatever Git provider that you use. I'm going to use GitHub and I'm going to pull in my Next project. [00:02:50] Now because we set up the Netlify.toml, you could see that it actually has the builds command in the published directory already set up. The Netlify.toml file is your configuration [00:03:00] file for how Netlify will build and deploy your site. That can also allow you to add redirects and branch and context specific settings and a lot more.

[00:03:10] For right now, we're just going to have these two lines right here and we can click deploy site. Once you do that, you'll have some data on how the site [00:03:20] is actually being built and everything. You can look at the logs if you'd like but then in a few seconds, we'll be able to actually look at the deployed site in action.

[00:03:30] There it is. Now I can click this link right here and look at that. We have our site that we made in just a few lines of code. [00:03:40] Now, later in the mission, we're going to talk a little bit more about other deployment options but for now I'm happy with this and let's talk a little bit about the code that you can actually write in Next.js, [00:03:50] onwards.

[00:03:55]

Explorers

your progress

310