Next.jsで作ったアプリをGitHub Pagesにデプロイする #Next.js

概要

Next.jsで作ったアプリをGitHub Pagesで公開するまでの手順
- はまりどころがあったのでその備忘です
以下の例ではGitHub Actionsを使ってmasterにPushされたら自動でデプロイされるようにしてます

はまりどころ①URLのbasepath問題

GitHub Pagesで公開したアプリのURLはhttps://{アカウント名}.github.io/{リポジトリ名}/の形式になります
{リポジトリ名}の部分のことをbasepathと呼んでいますがこれを設定する必要があります
- 設定しないとJSファイルなどのリソースをhttps://{アカウント名}.github.io/xxx.jsとbasepathが無いURLでとりにいってしまいます
next.config.jsにassetPrefixを入れることで設定できます

next.config.js

module.exports = {
  assetPrefix: '/repository-name',
};

basepathが不要な環境で動かすこともあるので自分の場合は以下のようにしてます
- dotenvはnpm i -D dotenvで追加しています

next.config.js

require('dotenv').config();

module.exports = {
  assetPrefix: process.env.GITHUB_PAGES ? '/repository-name' : '',
};

GITHUB_PAGESという環境変数が渡された時だけbasepathの設定を入れるようにしています
これをGitHub Actionsでデプロイするための設定は以下のような感じです
- package.jsonのscriptsの"export": "next export"を入れるのを忘れずに

.github/workflows/deploy.yml

name: deploy
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 12
        uses: actions/setup-node@v1
        with:
          node-version: 12
      - name: install
        run: |
          yarn install
      - name: build
        run: |
          yarn build
        env:
          GITHUB_PAGES: true
      - name: export
        run: |
          yarn export
      - name: deploy
        uses: peaceiris/actions-gh-pages@v2.3.1
        env:
          PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
          PUBLISH_BRANCH: gh-pages
          PUBLISH_DIR: ./out

buildのタイミングで環境変数にGITHUB_PAGESを設定しています
GitHub Pagesにデプロイする処理はactions-gh-pagesを使っています
- 詳しい使い方はこちらの記事をご参照ください

はまりどころ②JSファイルが404になってしまう問題

ここまでの手順でデプロイに成功し画面を表示することはできますが、JSファイルなどの取得が全て404になってしまいます
- URLは正しいはずなのになぜ？？？とはまりました

原因はGitHub Pagesの仕様として_から始まるディレクトリが見えないというものでした
- 404が出てるファイルは_next以下に配置されている
回避するためには.nojekyllというファイルをデプロイ対象のディレクトリに配置する必要があります
GitHub Actionsの設定ファイルのexportの後にtouch out/.nojekyllを追加します

.github/workflows/deploy.yml

name: deploy
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 12
        uses: actions/setup-node@v1
        with:
          node-version: 12
      - name: install
        run: |
          yarn install
      - name: build
        run: |
          yarn build
        env:
          GITHUB_PAGES: true
      - name: export
        run: |
          yarn export
          touch out/.nojekyll
      - name: deploy
        uses: peaceiris/actions-gh-pages@v2.3.1
        env:
          PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
          PUBLISH_BRANCH: gh-pages
          PUBLISH_DIR: ./out

これでGitHub PagesでNext.jsアプリを公開することができました！

追記

記事を書こうとしてより詳しく調べていたら公式のwikiにちゃんと説明が書いてありました
- https://github.com/zeit/next.js/wiki/Deploying-a-Next.js-app-into-GitHub-Pages