22 Aug 2021
Like I did with Gatsby, I want to make sure it’s easy for novice web developers to explore if Next.js is right for them.
I aim to lower the bar by bringing you along as I learn it myself.
I also hope to abstract core Next.js concepts away from the command-line tools often used to implement them so you can keep your computer clean while you dip a toe into Next.js’s waters.
What are SSGs?
Static site generators (SSGs) are wonderful pieces of software that, to oversimplify, run against 2 inputs you provide:
- Mostly-plaintext data you’d like to beautify with HTML into “content” for a web site
- “Template” code and other plaintext configuration files specifying patterns about how this beautification of data into HTML should happen
When run, SSGs build a folder full of files with HTML code in them.
You can then upload this folder to a web host such as Netlify, AWS, GitHub Pages, etc. for the world to admire as your web site.
Gross oversimplification! But the TL;DR is that SSGs like Jekyll, Hugo, Next.js, etc. reduce the amount of repetitive copying and pasting that would be involved in typing up a folder full of HTML files by hand.
Although SSGs are just computer programs, they’re not point-and-click software like Zoom, Excel, or iTunes. Instead, they have to be run from a computer’s command line interface (CLI), which can be finicky to get working correctly – especially if you don’t have “administrator” rights to your computer.
Worse yet for first-time users, SSGs typically don’t run directly on a consumer computer.
- Running Jekyll requires a computer with software installed so that it can execute programs written in Ruby.
Cloud to the rescue
Luckily, some web hosts let you borrow their computers when running a static site generator. They worry about installing and running the SSG and its underlying environment. All they ask is that you provide them with cloud-hosted copies of your 2 inputs: data & templates/config.
- GitHub Pages will install and run a stripped-down version of Jekyll for you.
- Netlify, Vercel, AWS Amplify, etc. will install and run a wide variety of SSGs for you.
Unfortunately, Jekyll + GitHub Pages being the exception, there isn’t a huge ecosystem of documentation or tutorials aimed at web developers who’d rather outsource static site generation to cloud providers than install SSGs on their computers.
I’d like to fix that.
Next.js series table of contents
Next.js in particular seems to attract experienced web developers who aren’t afraid to install and run finicky command line tools on their computers, and its tutorial / documentation ecosystem shows it.
That’s a high barrier to entry, but the reward is building web sites that lend themselves to “instant preview” experiences for content authors.
I avoid command line tool installation as much as possible so novices and dabblers can follow along.
Minimum viable build
Did you know you can put just 2 files in a cloud-hosted Git repository and build a home page with Next.js?