Setting Up Next.js SSG

I wanted to introduce SSG for SEO purposes, so I jotted down some notes on how to do it.
Feel free to give it a read!

What Is SSG?

SSG (Static Site Generation) is one of Next.js's data fetching strategies. It generates HTML files at build time and serves those static files.

Steps

Configuring next.config.js

With the code below, running next export in Next.js will generate static HTML/CSS/JS files.

module.exports = {
  output: "export", // 静的サイト (SSG) を生成する
  trailingSlash: true, // 各ページに `/` をつける (オプション)
};

Installing Packages

yarn install  # または npm install

yarn global add serve  # または npm install -g serve

Building Next.js and Generating Static Files

yarn build  # または npm run build
yarn export # または npm run export

Hosting the out/ Folder with serve

serve out

If successful, you'll see a screen like this.