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

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

next.config.js

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

という形にすれば、

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

nextjs.org

Nuxt.jsでいうところの、

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

と同じです。

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

next.config.js

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

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

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

個人的には、trailingSlashも設定するので、next.config.jsはこんな感じになることが多いです。

next.config.js

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

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

blog.kimizuka.org