毎度ハマるのでメモになります。

やること/ゴール

Next.js で静的サイトを吐く
出力されたファイルは main ブランチには置かない
GitHub Pages が静的サイトジェネレータ Jekyll を使おうとするが静的サイトを吐くのは next.js なので使わない
今回は llm-cost-estimator を例として扱います
- llm-cost-estimator は任意のリポジトリ名に変更してお試しください

GitHub の Pages 設定

このようにしました。

Next.js で静的サイトを吐く

何がともあれ next.js と GitHub pages の環境を作ります。

npx create-next-app llm-cost-estimator --typescript
npm install gh-pages --save-dev

config を設定します。output: 'export' で静的サイトを吐くようにします。
今回は docs ディレクトリに吐くようにしています。

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  ...(process.env.NODE_ENV === 'development'
    ? {}
    : {
        output: 'export',
        basePath: '/llm-cost-estimator',
        assetPrefix: '/llm-cost-estimator',
        distDir: 'docs',
      }
  ), // 略

ビルドしてサイト生成を確認しておきましょう。差分が大量になるので docs 配下は GitHub 管理下にしないようにします。

$ npm run build
$ ls docs/
_next       404.html    favicon.ico file.svg    globe.svg   index.html  index.txt   next.svg    vercel.svg  window.svg
$ echo "docs/*" >> .gitignore

Jekyll を無効にしてデプロイする

あとはこれらを GitHub Pages に置くだけなのですが、標準だと Jekyll がビルドしようとしてエラーになるため、 jekyll を無効にします。

$ touch .nojekyll

root に .nojekyll を置きます。

package.json

{
  "name": "llm-cost-estimator",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "deploy": "next build && touch docs/.nojekyll && gh-pages -d docs -b gh-pages"
  },

touch docs/.nojekyll はいらないかも…

デプロイのコマンドを追加します。
gh-pages -d docs -b gh-pages は docs の内容を gh-pages ブランチにまるっと上書きするぞ！というコマンドです。
デプロイします。

$ npm run deploy

# 略
Route (app)                                 Size  First Load JS
┌ ○ /                                    3.46 kB         105 kB
└ ○ /_not-found                            977 B         102 kB
+ First Load JS shared by all             101 kB
  ├ chunks/4bd1b696-52a6696c08e3276c.js  53.2 kB
  ├ chunks/684-836db4fb37c5abfa.js         46 kB
  └ other shared chunks (total)          1.99 kB


○  (Static)  prerendered as static content

Published

このようになれば GitHub へのリクエストは成功です。
Published というとサイトが出来上がったと思いがちですが、このあと GitHub Actions でデプロイが実行されます。

GitHub の Actions を見てみましょう。
Jekyll が実行されていないことを確認。

サイトの表示を確認しましょう！

問題なければ push して作業は終わり。お疲れ様でした。