In this video, you will learn how to set up a website manually using Next.js and Netlify to host the application. The great news is this process should take you about 10-15 minutes and it will not cost you a thing. By following the steps in this article, you will have a website that anyone in the world can view. This is the third article in my JamStack series. The end goal of this series is to create a JAMStack powered website that integrates with a headless CMS. To get there, we first need the basics up and running!

Step One

The prerequisites for this project is to have Node.js and npm installed. After that has happened, run this command in a terminal:

Next, open up the project within your IDE of choice (mines VS-Code) and open the package.json file. You will need to update the projects scripts to include these ones:

Let us recap what is going on here:

  • build will create a production build
  • export will convert the site to static HTML
  • start will run the NextJS server
  • dev is for local development with hot-reloading and all that good stuff enabled!

When building ReactJS applications, NextJS is great. It handles a lot of things for you in the background. This means you can get a site up and running really quickly without having to worry about a lot of set-up nonsense! It will even take care of all the page routing for you! To create a working page, all you need to do is create a directory called Pages in your project. Any component that you create here will map to a web page that can be accessed on the website. The code to create a simple page is the same as building any ReactJS component, for example:

Now we have a working site with a basic homepage up and running, we are ready to host the site in Netlify. The first step is to push your code into a repository. I suggest you use GitHub as it easily integrates with Netlify. Signing up for Netlify is super-simple, I use my Github login. Watch the video on how to set up a site in Netlify, however, the basics of adding a project into source control is shown below:

Within Netlify all you need to do is select Create New Site, authorize Netlify to talk to GitHub and then pick the project that you want Netlify to host for you. Netlify will also want to know the build command and the output of your project (where the files it needs to host will be located). I will cover what you need to use here shortly. By selecting the repository, setting the build and output directory, Netlify will do all the infrastructure set-up for you! After creating a site in Netlify, I suggest you do two things:

  • Change the sites name to be something more user-friendly. This is done in Site Settings ➡️Change Site Name. You know you are on the right page if the URL contains settings/general

  • Add the build status to your projects README.md. You can do this by copying some HTML. In the site settings area, you will see a section called 'Status badges', copy this build HTML from Netlify and paste it into your projects README.md to look super cool 🙄

If everything goes to plan your website should now load and be viewable to the whole world... WOW! We still have an issue though, we have not optimised the site for production. Our application is still being run as a ReactJS app and not a static JAMStack website. Lets us change that! When we set up the site in Netlify we used the default properties. These are:

  • It will try to call a script in your project called build to compile the site
  • It will look within a folder called out directly for the website files.

As we are using NextJs, we can statically generate our site by converting it to HTML to make things quicker. To change the build pipeline to convert the site to static files we will need to configure Netlify. This can be done in code in your project. Create a new file called Netlify.toml. This file needs to be created in the project root. In here, add this config code:

With this code added, committed and pushed to your repository. When Netlify sees an update in GitHub, it will automatically build your project. Using the values defined in Netlify.toml to configure the build, it will build the site and then use the export script to turn the site into static HTML. This is good. You can configure all kinds of cool things from this file, like 301 redirects, and even triggering Cypress tests post-build. Check out my other posts in this series to learn more about this.

With all these bits in place, you now have a skeleton project that you can use to build ReactJs powered websites. You have set up a powerful CI/CD pipeline, all with minimal effort. It also hasn't cost you a thing! Amazing right? Happy coding!