Next.jsで複数のassetPrefixを切り替えながら使う 💻

f:id:kimizuka:20210103011013j:plain

ことの発端

めずらしいケースだとは思うのですが、最近、ステージングと本番のURLルートのパスが違う環境でNext.jsを使う機会がありました。

ざっくりいうと、

本番

https:/kimizuka.fm/production/

ステージング

https:/kimizuka.fm/staging/

みたいな感じです。
ステージングはサブドメインで用意することが多かったため、僕自身こんなことは初めてだったのですが、毎回パスを手動で書き換えるといつか事故る未来が見えたので、なんとか自動化できなかと考え始めました。

更には、localで開発しているときは / をルートにしているため、3つのパスを使い分ける必要が出てきます。

また、前提条件として、プロジェクトとしては静的サーバにホスティングするため、

next export

で静的書き出ししたものをホスティングすることになります。

Next.jsでURLのルートを設定するには、assetPrefixを使えば良いことは、以前調べたのですが、今回は複数のassetPrefixを出し分ける方法を模索します。

nextjs.org
blog.kimizuka.org

結論

いろんなやり方があるとは思うのですが、僕は、ステージング用のexportと本番用のexportでスクリプトを分けることで解決しました。

package.json

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "export-staging": "next build && next export -o staging",
  "export-production": "next build && next export -o production"
}

こんな感じでstaging用は /staging 以下に、 production用は /production 以下に書き出します。
そして書き出したものをそれぞれホスティングすればOKです。

next.config.js

const isDevelopment = process.env.NODE_ENV !== 'production';
const isProduction = process.env.npm_lifecycle_event === 'export-prod';

module.exports = {
  assetPrefix: isDevelopment ? ''
                             : isProduction ? '/production/'
                                            : '/staging/'
};

そして、assetPrefixを三項演算子で書き出せば、