Next.js for novices and dabblers
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.
SSG downsides
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.
- Running Next.js requires a computer with Node.js software installed so that it can execute programs written in JavaScript.
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.
Unsung heroes
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.
This isn’t surprising. Next.js’s templating language, rather than being relatively sight-readable like Nunjucks or Liquid, is pretty much the full-on JavaScript programming language.
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’m writing a series of posts, inspired by what I saw at Jamstack Conf 2020 chronicling my journey toward building a Squarespace-like content authoring experience in the Jamstack.
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?
