🐙

2023年8月版: Next.jsをGitHub ActionsでGitHub Pagesにデプロイする方法

2023/08/28に公開

Next.js

GitHub Actions

GitHub Pages

tech

1. はじめに

GitHub Actionsでワークフローファイルを作成しておくと、push時に自動的にnext.jsをビルドして、GitHub Pagesにデプロイすることができます。

そこで、GitHub Actionsを使用してNext.jsをGiHub Pagesにデプロイする方法を調べて、実行しようとしたところ、調べて出てくる内容からかなり変わっていました。

2023年8月現在では、ワークフローファイルを手書きすることもなく、テンプレートが提供されており、テンプレートファイル1か所と２つのソースファイルを変更するだけで、簡単にGitHub Pagesにデプロイすることができました。

この記事では、GitHub Actionsを使って、Next.jsアプリケーションをGitHub Pagesにデプロイする方法を説明します。

前提条件：

GitHubにアカウントがある
Node.jsの開発環境がそろっている

2. Next.jsアプリケーションの作成

まず、新しいプロジェクトを作成します。
プロジェクト名は、nextjs-deployとします。

npx create-next-app@latest nextjs-deploy --typescript

質問への回答はすべてデフォルトにしたので、App Routerを使用する設定になっています。
App Routerを使わない場合は、next.config.jsとnextjs.ymlの修正が不要と思われます。

3. GitHubリポジトリへのpush

まず、1.で作成したプロジェクトをGitHubのリポジトリへ追加します。
GitHubをフリープランで使っている場合は、リポジトリをpublic repositoryにしないとGitHub Pagesを使えないので注意です。

今回は、Visual Studio Codeから「branchの発行」を行いました。

4. ソース修正

GitHub Pagesにデプロイするためにすこしソースを修正を行います。
修正するのは、next.config.jsとImageコンポーネントのsrc部分です。

4.1. next.config.jsの変更

Pages Routerでは静的サイトを出力するには next exportを使っていましたが、App Routerではnext.config.jsを変更するように変わりました。
そのため、App Routerではnext exportはなくなりました。

next.config.jsの修正は、以下のようにexport: "output"を追加します。

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
}

module.exports = nextConfig

これで、next buildを実行すると静的サイトが出力されるようになります。

4.2. Imageコンポーネントのsrc修正

Imageコンポーネントは、src/app/page.tsxで2か所使われています。

Imageコンポーネントはサーバーで画像の最適化を行うため、SSGで使用できないのでimgタグに書き換える必要があるとの説明されていることもありますが、Imageコンポーネントのままで大丈夫です。
ただし、画像の最適化処理は行われません。

修正点としては、Imageコンポーネントのsrcの先頭にbasePathを追加します。

basePathは、サブディレクトリにデプロイする際に設定する必要がありますが、上記のnext.config.jsの変更でbasePathは設定してません。
これは、GitHub Actionsのワークフローファイルで自動的に追加されるためです。

basePathが設定されている場合、Linkコンポーネントはリンク先をbasePath付きに変換してくれますが、ImageコンポーネントはbasePath付きに変換してくれないので、自分で付ける必要があります。
これは、以下のドキュメントに書かれています。

修正点は以下の通りです。

page.tsx

import Image from 'next/image'

import { basePath } from "../../next.config" // 追加
const BASE_PATH = basePath ? basePath : "" // 追加

    ...
    <Image
      src={`${BASE_PATH}/vercel.svg`} // 修正
      alt="Vercel Logo"
      className="dark:invert"
      width={100}
      height={24}
      priority
    />
    ...
    <Image
      className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
      src={`${BASE_PATH}/next.svg`} // 修正
      alt="Next.js Logo"
      width={180}
      height={37}
      priority
    />
    ...

修正したソースはpushしておきます。

5. リポジトリの設定

次にブラウザでGitHub.comのリポジトリの設定を変更します。

先ほど作ったリポジトリを開き、「Settings」をクリックします。
左側のナビゲーションから「Pages」をクリックします。
「Build and deployment」セクションの「source」で「GitHub Actions（beta）」をクリックします。

Next.jsの設定が表示されるので、「configure」をクリックします。
GitHub PagesへNext.jsをデプロイするテンプレートファイル(nextjs.yml)が表示されます。

App Routerではnext exportがないため、以下の2行を消します。

nextjs.yml

      - name: Static HTML export with Next.js
      run: ${{ steps.detect-package-manager.outputs.runner }} next export

「Commit Changes...」をクリックします。
「Commit Changes」をクリックして、自動生成されたnextjs.ymlファイルをコミットします。

5.1. nextjs.ymlのポイント

提供されているテンプレートは、ほとんど設定を行わずにGitHub Pagesへのデプロイが可能になっています。

ポイントは2つあります。

Setup Pages(actions/configure-pages@v3)
ここで、next.config.jsにbasePathの設定とImageコンポーネントの最適化を行わないように設定が書き込まれます。
実行時のログを見るとどのように書き換えられたかが確認できます。
手動でnext.config.jsを変更しておくと、この手順は削除できます。
Deploy to GitHub Pages(actions/deploy-pages@v2)
ここで、GitHub Pagesにデプロイされます。以前は、デプロイ時に使用するGitHub Tokenを設定する必要がありましたが、これを使うことで設定が必要なくなりました。

6. GitHub Pagesへのデプロイ

コミットを行うと自動的にデプロイが始まるので、デプロイが完了するのを待ちます。

「Action」をクリックすると、workflowの状態が表示されます。

実行中はオレンジです。

実行が完了すると緑になります。

タイトル部分をクリックすると詳細が表示されます。

7. デプロイしたページの確認

リポジトリ名がGitHub Pagesにデプロイした際のサブディレクトリ名となります。

GitHub PagesのURLの構成は以下の通りです。

https://[username].github.io/[repository-name]/

今回はプロジェクト名をそのままリポジトリ名にするので、デプロイ先は以下のURLになります。

https://0701pino.github.io/nextjs-deploy/

以上で、GitHub Actionsを使用してNext.jsアプリケーションをGitHub Pagesにデプロイする方法の説明は終わりです。