同じドメインでpathによってサービスを変更することってよくあると思います。
その時にNextjs内で使用しているpublicのpathはデフォルトで/_next/
なので、
最初のリクエストは正常に動作するのに、その後のファイルのロードなどでエラーになってしまった経験ないですか?
私は何回かあります。そんな時に使用できるtipsです。
手順は簡単で、next.config.jsに以下の内容を追加するだけです。
const nextConfig = {
assetPrefix: "/hoge", // hogeはなんでも良くて適当なpathです
rewrites() {
return [
{
source: "/hoge/_next/:path*", // /hoge/_next/に来たものは/_next/にURLを書き換える
destination: "/_next/:path*",
},
];
},
};
上記のようにすると /_next/
のURLをユーザに届ける際に/hoge/_next/
に変換されます。
そしてユーザが/hoge/_next/
にリクエストをしてくると、Nextjs内部では/_next/
に変換してくれるので
正常に動作するようになります。
もっと上手く華麗に解決できる方法あれば教えてください!