Next.jsをGitHub Pagesにデプロイする 🐱 - みかづきブログ・カスタム

Next.jsを使う時、これまで、ほとんどの場合Vercelに、ごくたまにNetlifyにデプロイしてきました。
なぜなら楽なので。

今回は、Github Actionsを使ってGitHub Pagesにデプロイしてみようと思います。

今回作成したウェブサイトはこちら。

https://kimizuka.github.io/nextjs/

でかでかと、「Ya-Ha-!」とだけ表示されているサイトです。

ソースコードはこんな感じ。

src/app/page.tsx

import styles from './index.module.css';

if (!process.env.SECRET_KEY) {
  throw new Error('SECRET_KEY is not defined in environment variables.');
}

export default function IndexPage() {
  return (
    <div className={styles.container}>{process.env.NEXT_PUBLIC_MESSAGE}</div>
  );
}

そう。「Ya-Ha-!」という文字列は.envから読み取っています。
さらに、.envにSECRET_KEYが設定されていないとビルドがこけるようになってます。
VercelやNetlifyでenvの管理は楽々ですが、Githubではどうなるのか調査するためにこういった作りにしてみました。

では、早速、GitHub ActionsでGitHub Pagesにデプロイしていきましょう。

❶ next.config.tsを修正

import type { NextConfig } from 'next';

const repositoryName: string = 'nextjs';
const isProduction: boolean = process.env.NODE_ENV === 'production';

const nextConfig: NextConfig = {
  devIndicators: false,
  output: 'export', // 静的書き出し
  ...(isProduction // 本番環境ではbasePath、assetPrefixを変更
    ? {
        basePath: `/${repositoryName}`,
        assetPrefix: `/${repositoryName}/`,
      }
    : {}),
};

export default nextConfig;

重要な点は、

outputをexportにして静的書き出しにする
独自ドメインを当てない場合、Github PagesのURLはユーザー名.github.io/リポジトリ名/ になるので対応する

2点です。（重要ではないですが、devIndicatorsも非表示にしています）

参考記事

blog.kimizuka.org
blog.kimizuka.org
blog.kimizuka.org

❷ .github/workflows/next-build-and-deploy.yml を作成

name: Next.js Build And Deploy

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "22.x"

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Build Next.js app
        run: yarn build
        env:
          NEXT_PUBLIC_MESSAGE: ${{ vars.NEXT_PUBLIC_MESSAGE }} # varsから取得
          SECRET_KEY: ${{ secrets.SECRET_KEY }} # secretsから取得

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out