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

## 概要

- 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`を入れることで設定できます

```js:next.config.js
module.exports = {
  assetPrefix: '/repository-name',
};
```

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

```js: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"`を入れるのを忘れずに

```yml:.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](https://github.com/peaceiris/actions-gh-pages)を使っています
    - 詳しい使い方は[こちらの記事](https://qiita.com/peaceiris/items/d401f2e5724fdcb0759d)をご参照ください

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

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

<img width="660" alt="スクリーンショット 2019-11-14 8.06.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/9cf4ec9c-59db-00f6-50be-8272571bb448.png">

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

```yml:.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