Next.js SSG を設定する

SEO対策のためにSSGを導入しようと思い、その方法をいかにメモしました。
よければ読んでいってください！

SSGとは？

SSG（Static Site Generation）は、Next.js の データ取得（データフェッチ）戦略の1つで、ビルド時に HTML ファイルを生成し、それを配信する仕組みです。

手順

next.config.js の設定

以下のコードでnext.js は next export を実行すると、静的HTML/CSS/JS ファイルを生成します。

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

パッケージのインストール

yarn install  # または npm install

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

next.js のビルドと静的ファイル生成

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

serve で out/ フォルダをホスト

serve out

成功すると以下のような画面になります。