Set up Netlify deployments for a Next.js blog

Tomasz Łakomy: [0:00] Our blog right now has two major parts. We have the list of all of the blog posts and also a page for each individual blog post. We still have plenty of work to do. Nevertheless, I suggest we go ahead and deploy this blog to Netlify for two reasons.

[0:15] First off, it is a good idea to test the entire development workflow from start to finish as soon as possible. Secondly, with Netlify, we get automatic deployments. After the initial setup, we only have to run git push in order to automatically deploy the next version of our blog.

[0:31] To deploy our blog with Netlify, first off, go ahead and create a new file, which I'm going to call netlify.toml. Inside of it, I'm going to create a build command. Whenever build is going to start, we are going to tell Netlify to execute "npm run build && npm run export."

[0:48] Secondly, we're going to set up the publish = out. To explain, npm run build is going to build our Next.js app, and npm run export is going to export all of our files as static assets to the out directory. In other words, this file is telling Netlify how to build our blog.

[1:07] Currently, we do not have npm run export command, so we have to add it. Go to package.json and beneath the start command, add a new one. Export is going to run next export and that's it. Now, we are ready to deploy the site to Netlify.

[1:21] Let's quickly push those changes to the repo. I'm going to quickly commit "netlify deploy" and run git push. Now, we can deploy this generate-static-pages branch. To do that, login to your Netlify account. If you don't have one, creating an account takes about a minute.

[1:37] In any case, I'm going to click on new site from Git. I'm going to connect my Netlify account to GitHub. Next up, you have to find the repository for your blog. In my case, it's under egghead-my-next-js-blog.

[1:50] Next up, you have to decide which branch you would like to deploy. In most cases, it's going to be either master or main branch. In my case, this is the generate-static-pages branch. Next up, we have to specify the build settings.

[2:01] If you have the netlify.toml file on your master branch, those things are probably pre-populated for you. In my case, I'm going to copy and paste that over here. I'm also going to set the publish directory to out and that's it. Let's hit Deploy site. As we can see, right now our site deploy is in progress, and this is going to take about a minute.

[2:19] If you want to, you can take a look at a Deploy log to find out what exactly Netlify is doing with your code. After a successful deployment, we can click over here in order to see our blog deployed to Netlify.

[2:30] If we take a look at the source of this page, we can see that it has been statically generated. For instance, here we have the header with the title of My awesome blog, and this is the same one that we can see over here.