SSG with Next.js App Router

This article describes how to generate static site. The final aim is to upload the files to the hosting server.

Static rendering in App Router

Pages Router used the term "SSG (Static Site Generation)", as did Nuxt.js (a framework using Vue).

In App Router, this term is no longer used and is now called Static Rendering.

Configuration

const nextConfig = {
  output: 'export',

  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // trailingSlash: true,

  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
  // skipTrailingSlashRedirect: true,

  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}

module.exports = nextConfig

Reference: Deploying: Static Exports | Next.js

Command

$ npm run build

Test

To test rendering generated files, run the following command.

$ npx serve@latest out