2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Nextjsのpublicパスの変換

Last updated at Posted at 2023-03-10

同じドメインで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/に変換してくれるので
正常に動作するようになります。

もっと上手く華麗に解決できる方法あれば教えてください!

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?