change default _next in request path into something custom

[iljamulders]

What version of Next.js are you using?

12.0.4

What version of Node.js are you using?

12.22.7 / 14.17.5

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Local & Docker container

Describe the Bug

The following no longer works in Next.js 12 in combination with i18n
Requests for static assets return a 404.

module.exports = {
  assetPrefix: '/docs',
  rewrites() {
    return [
      { source: '/docs/_next/:path*', destination: '/_next/:path*' }
    ]
  }
}

Originally posted by @timneutkens in #5602 (comment)

Expected Behavior

changes default _next in request path into something custom

To Reproduce

$ yarn create next-app --typescript

next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  i18n: {
    locales: ['nl', 'de'],
    defaultLocale: 'nl'
  },
  assetPrefix: '/docs',
  rewrites() {
    return [
      { source: '/docs/_next/:path*', destination: '/_next/:path*' }
    ]
  }
}

$ yarn build
$ yarn start

Go to http://localhost:3000/, static assets are not loaded

[nmaddp1995]

Do you have any workaround for that

[jholster]

We have a similar need. There are server stacks where internally urls are routed to specific micro-service by using certain url prefix, requiring fully-customizable paths in web application framework.

[MarsArbiter]

we need it too!

[ijjk]

Hi, what is the user case for this? It seems like basePath would be more fitting here and doesn't require the additional rewrites be configured.

[federico-moretti]

I have also this problem with the following config.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  assetPrefix: "/custom",
  async rewrites() {
    return [
      { source: "/custom/_next/:path*", destination: "/_next/:path*" },
      { source: "/custom/api/:path*", destination: "/api/:path*" }
    ];
  },
  i18n: { locales: ["en", "it"], defaultLocale: "en" }
};

module.exports = nextConfig;

Does basePath also change api urls? If it only changes static files I could always use a rewrite for api and basePath for static files, right?

I've done some tests and it appears that basePath updates pages, apis and static files urls. The only problem with my use case is that I have to use the original path for the pages but I could somehow work around it.

[MarsArbiter]

we want to integration the next page in android. but the underscore cause the assets loading run into error.
maybe i found the way. https://stackoverflow.com/questions/59158942/make-android-copy-all-from-next-asset-folder-via-aaptoptions
but i still want next can provide this capability

[oliviertassinari]

It seems like basePath would be more fitting here and doesn't require the additional rewrites be configured.

@ijjk It doesn't work for us mui/mui-toolpad#660 because it also rewrites the links https://nextjs.org/docs/api-reference/next.config.js/basepath#links. Without this behavior, I suspect that it would work well. These link rewrites cause two problems for us 1. we can't work/reason with the URLs as if we were under the root folder. 2. some of the links that we import can't be changed, they have to be written as if they were under the root folder.

[ijjk]

I see, this sounds similar to #34371 (comment) and the shared snippet should allow rewriting correctly with beforeFiles rewrites.

[teemuy]

Seems similar to the idea to make the /next/ URL prefix configurable.

[tom-bart]

Is there any update on this feature? Currently it is impossible to host more than one Next App on one domain as the webpack-hmr (WebPack Hot Module Replacement) calls will always hit '/_next/data' which will conflict with other apps hosted on the same domain.

The 'assetPrefix' is not a solution as it only changes the assets, not the post-load webpack-hmr ajax calls (they still hit /_next).

The basepath is also not a solution as it limits to a specific path.

Without this feature NextJS is not suitable for enterprise solutions, just for small microsites.

Any idea when this feature will be available?

[hmacafee]

Setting a basePath also breaks parallel routes in the app router currently. I would love to know of a workaround if anyone has found it.

[willfolsom]

@hmacafee Your mileage may vary, but I got something working: #45422 (comment)

I'm building two projects to static and serving both.

[csdiehl]

I also need this feature. Some static site hosting services ignore any directories with an underscore in the name. On GH pages you can bypass this by simply adding a .nojekyll file to your build. But for the CMS I'm working with now, I need to be able to rename the folder to something custom to get rid of the underscore.

Astro provides this functionality in its config.

thanks for considering

[solendil]

Hello,
Same problem with Cloudflare R2 https://community.cloudflare.com/t/r2-keys-with-multiple-slashes-in-key-require-url-encoding-or-it-404s/641375 : having an underscore in the object path doesn't work. I understand part of the problem is on the Cloudflare side, but part of the problem is also having such a hard-coded requirement, when so many people are begging for a change...