How to Deploy a Static Site with Next.js and Netlify

Some Definitions

There are, potentially, a bunch of new terms in this article that I thought I'd define up-front.

What is a static site?

A static site is a website where, for the most part, what you see is what you get. The content of a page is read from the server on request, and nothing is added to it - no database, no data server. If this sounds familiar, it is. This is the foundation of the web we're talking about here. Just a file with some content and some links.

What isn't a static site?

A static site is not something like a Wordpress site or single-page application. With the Wordpress site, pages are built on templates, and you need a server running to actually put those templates together with the content to get a webpage back out in the browser. A static site has all of this figured out ahead of time, and it doesn't need to do all of this construction on request.

A static site is also not a single-page application (SPA). These are built - primarily - with JavaScript and render much of their content in the browser. This can be great, and it can also suck, but that's a topic for another day. The point is, with a SPA, the user sends the request, the browser gets a big ol' blob of JavaScript that gets parsed, and then some content gets rendered. With a static site, depending on how much JavaScript you add, the content is all figured out ahead of time, and that just gets rendered right there in your browser.

Now, static sites don't have to be this basic. There are a lot of great things that can be done on top of this without breaking the idea of what being a static site means. I'll leave that for another day, but, if your interested check out the Syntax podcast, episode 34 for more information.

What is Next.js?

Next.js is a framework built by Zeit. It's built on top of React, providing a lot of defaults and set-up to help you get started creating React apps quickly. It also has the option to export that app as a static site, which is what we'll be doing.

This makes Next.js a static site generator. That means it provides some tooling around building a website that is easier and more efficient than writing all of our HTML files by hand. For websites that contain the same kind of content in multiple places - a blog with many posts, for example - it would be nice if we could template that out. A static site generator does exactly that. It ususally provides some kind of templating engine to build pieces of your website that it can smash together when it builds your site.

Hold on now, I hear you say, I thought you said we were making something without any templates and that it didn't need to be built. And I did, sort of. The WordPress example I gave before did use templates like a static site generator does, true. The difference lies in when those templates are used. WordPress builds out a page on request. Each time a user visits myawesomewebsite.com/, the server builds that page. Caching can come into play with that, but the first request to the server still smooshes the template and the data together. The static site has already been built by the time a user is requesting it. The templates the site author used are conveniences, but the content is all just HTML and CSS.

What is Netlify?

Netlify is an absolute gem of a web host. You'll get to see first-hand how easy it is to deploy a website with them. They also provide many utilities that can enhance your static-site experience, which are out of the scope of this article.

Getting Started with Next.js

I'm not going to spend a lot of time here, because the Next.js docs are amazing. They even gamified learning Next by giving you points for completing steps in the tutorials. I love it. So, check them out for any gaps I leave here.

So, for the quickest of quickstarts:

• Create a new directory your machine:

          
  $ mkdir hello-nextjs
          
        

• Set it up as a JavaScript package:

          
  $ cd hello-nextjs
  $ yarn init -y
          
        

• Install next, react, and react-dom:

          
  $ yarn add react react-dom next
          
        

• Add an index page:

          
  $ mkdir pages
  $ touch pages/index.js
          
        

Add these contents to pages/index.js:

      
const Index = props => <h1>Hello, Next.js!</h1>

export default Index
      
    

• Run next to serve that website!

          
  $ ./node_modules/.bin/next
          
        

• And last, add the export command to your package.json scripts which should leave your package.json file looking like this:

          
  {
    "name": "hello-nextjs",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "scripts": {
      "export": "next build && next export"
    },
    "dependencies": {
      "next": "^8.0.3",
      "react": "^16.8.3",
      "react-dom": "^16.8.3"
    }
  }
          
        

That does feel like a lot - for a quickstart - but it gets us to a point where we can deploy. So, push that code up to a git repository, and let's go to Netlify!

Deploying with Netlify

Sign up (or log in) and you should see a screen that looks like this:

Click on the 'New Site from Git' button, and then select where you pushed your git repo (mine is on GitHub). Now, you may not have done this before, so you'll have to authorize Netlify on GitHub. It should just be a matter of connecting your GitHub account and then agreeing to authorize it when you're redirected. If you have any trouble with that, let me know, and I'll do my best to help you.

Once you have authorized Netlify, you should be able to select the repo you created earlier:

Then, you'll need to tell Netlify which branch you want to deploy from and how to build your site. Rather than explaining, just make sure that your deploy page looks like this:

Click 'Deploy Site' and you'll be redirected to a page that looks like this:

Conclusion

And that's it! You now have a deployed static site that anyone can visit. Netlify generated a domain for you that you can share with anyone who wants to see your new website. You can add a custom domain later, if you'd like.

If you followed along and created a site with me today, please share it with me on Twitter. I would love to see what you made! Here's mine: https://festive-bardeen-13118b.netlify.com/