GithubActionsを使ってNext.jsで作ったサイトをGithubPagesで公開した


Next.jsで作成したサイトをどうにか公開したいなと調べていたら、GithubActionsでどうやらできるようで、やってみたので記事として残しておこうと思います。

:::note
今回はNext14.2を使用しています。
Next13等だとやり方が変わってくると思うので注意してください。
:::

## 実際にやってみる
### 1.GithubActionsの設定をする(ymlのテンプレートを適応する)
まず、Settingsから、Pagesのページに飛びます。
![スクリーンショット 2024-07-28 20.22.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/579881c8-8903-be5f-94c2-f2b34d8554e5.png)

そこから`browse all workflows`を選択して、下のように`Next.js`を調べ、`configure`を選択します。

![スクリーンショット 2024-07-28 20.23.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/8302cb95-561e-76ce-1331-7a37ff463852.png)

すると、下のような画面になると思います。これがNext.jsにおけるymlファイルのテンプレートになります。
![スクリーンショット 2024-07-28 20.25.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/8e2cd838-35b2-4d7c-73ba-86aea113f301.png)

そしたら、`Commit Changes`を選択して、mainブランチに反映させます。
その後、mainブランチからpullします。

### 2.コードの修正
デプロイするに当たって幾つか設定する必要があります。
まず、`next.config.mjs`に静的エクスポートの設定を行うために、以下のコードを追記します。
```diff
const nextConfig = {
+   output: 'export'
};
```
>静的エクスポート:Node.jsのサーバーを使わずに、静的コンテンツとしてエクスポートできる機能

次にソースコードに記述した画像パスも修正します。
```diff
+import nextConfig from "../../next.config.mjs";
+const BASE_PATH = nextConfig.basePath || "";

<Image
-    src="/images/img.png"
+    src={`${BASE_PATH}/images/img.png`}
    alt="icon"
    width={500}
    height={500}
/>
```
>basePathの設定は後ほど

上のような修正をしたのは、アプリケーションがデプロイされた際に、アプリケーションがサブディレクトリに配置されるため、パスの解釈が異なってしまうためです。

具体例として、アプリケーションが認識できるパスが下だったとします。
- 開発環境:`https://localhost:3000/images/img.png`
- 本番環境:`https://example.com/myapp/images/img.png`

しかし、`src="/images/img.png"`だと本番環境でのパスは
`https://example.com/images/img.png`となってしまい、存在しないパスを参照してしまうことになってしまいます。
したがって`basePath`を設定しています。

最後に、先ほどプルしたymlファイルを修正します。
```diff
      - name: Setup Pages
        uses: actions/configure-pages@v5
        with:
          # Automatically inject basePath in your Next.js configuration file and disable
          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
          #
          # You may remove this line if you want to manage the configuration yourself.
          static_site_generator: next
+          generator_config_file: next.config.mjs

```
こうすることで`nextConfig`にbasePathが自動で追加されます。
>なぜかこれ設定しなくても動きました。よくわかりません。

ここまで終わったら、mainブランチにpushします。

## デプロイできているか確認する
pushするとリポジトリのmainブランチにオレンジ色の円が表示されます。
![スクリーンショット 2024-07-29 2.52.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/631136b7-401d-e05c-7d15-3659d128e975.png)
これはGithubActionsが機能している状態を表していてCIツールが動いています。

ビルドとデプロイが完了すると緑のチェックマークに変わります。
![スクリーンショット 2024-07-29 2.54.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/43d80002-f658-da88-022f-b5d6fbcbf0d9.png)

ここから最後のActionsに移動し、最後のコミットメッセージが同じ見出しが書かれているworkflowを探します。
![スクリーンショット 2024-07-29 2.54.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/b177d1d7-2fdf-0c10-6276-160b017418b9.png)

すると、下のようになっていると思うので、deployにあるURLからちゃんとデプロイできたかどうかを確認します。
![スクリーンショット 2024-07-29 2.55.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/03bc0f0f-5e9b-540e-cbb7-092043dcbc5d.png)

確認できたらokです！お疲れ様でした!