みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Next.jsでURLのルートを変更する 💻

f:id:kimizuka:20210103011013j:plain

ウェブサイトのルートが / じゃないときの設定方法です。
assetPrefixを、

module.exports = {
  assetPrefix: '/hoge'
};

という形にすれば、

/hoge/ がルートになります。

nextjs.org

Nuxt.jsでいうところの、

export default {
  router: {
    base: '/hoge/'
  }
}

と同じです。

ただ、ローカル環境で開発しているときは / をルートに。サーバにアップしたときは /hoge/ をルートにしたいときもあるかと思います。
そんななときは、

const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  assetPrefix: isProd ? '/hoge' : '',
  trailingSlash: true
};

という感じで、envをつかってassetPrefixを出し分けることで実現できます。