basePath as runtime value

[M3kH]

Describe the feature you'd like to request

Currently basePath is consumed during build step although this value could "easily" be changeable at runtime.

This can enable more flexibility during the deployment without the cost of build * basePath.

Describe the solution you'd like

Modifying the current behaviour of config.basePath might introduce a breaking change.

An option could be to add a config (maybe as env as: process.env.NEXT_RUNTIME_BASEPATH) and make it accessible in window.__NEX_DATA__ as basePath.

Such to have the option to do: process.env.NEXT_RUNTIME_BASEPATH || process.env.__NEXT_ROUTER_BASEPATH.

Which with webpack.plugins.DefinePlugin could be declared as such "process.env.NEXT_RUNTIME_BASEPATH": "window.__NEXT_DATA__.basePath".

Reference:

• DefinePlugin usage
• Example of usage of process.env.__NEXT_ROUTER_BASEPATH

Describe alternatives you've considered

Currently my workaround is:

• Declare a variable process.env.BASEPATH and expose to the client as window.__CONFIG__.BASEPATH and to the server as global.__CONFIG__.BASEPATH.
• Modify existing process.env.__NEXT_ROUTER_BASEPATH webpack definition in DefinePlugin:

  webpack(config, options) {
   config.plugins.forEach((i) => {
     if (i instanceof options.webpack.DefinePlugin) {
       if (i.definitions['process.env.__NEXT_ROUTER_BASEPATH']) {
         i.definitions['process.env.__NEXT_ROUTER_BASEPATH'] =
           '(typeof window === "undefined" ? global : window).__CONFIG__.BASEPATH';
       }
     }
   });
   return config;
 }`

• Add in _document.tsx the definition of window.__CONFIG__

[u8sand]

Just sharing another workaround:

https://gist.github.com/u8sand/db56c9db4afc381c3716e9a60f96b638

It might break in future versions because of NextJS's slightly different handling of the root path.

In short, you build with an entrypoint of /__ENTRYPOINT__ (which is hopefully unique across your codebase), then you can find/sed replace this special string to whatever the actual entrypoint needs to be without having to rebuild.

Presumably the same trick could be used for other environment variables. It's not ideal but beats rebuilding at runtime..

[DiskCrasher]

NOTE: No longer works in next@^13

[castafab]

Any news on this topic?

[david0178418]

Same question. Seeing people with similar issues trying to deploy path-agnostic docker containers.

[vanyadymousky]

Hello, any updates on this issue? Highly relevant for me

[camelaissani]

@M3kH thank you for the workaround but it looks like this fixes partially the problem. At least with next 13.4.4
On my side I noticed the basePath is not set at the router level which makes the router.push function to push url without it.

[M3kH]

Yeah there has being some major refactor on the new Router, so my patches should be revisit.
I will see if I can identify the issue and maybe provide new guidances for a workaround, although I seriously hope someone from NextJS would look at this as some point.

[dimovelev]

Are there any concrete plans to implement that?

[dimovelev]

That is funny - two years have passed. I would say that this is not happening 🤣

[T3rm1]

It really surprises me that Next.js doesn't support such a basic feature. It only supports application hosted in the root of a (sub)domain. This is really limiting.

[officert]

Would love to see support added for this 👍

[LukNasc]

Describe the feature you'd like to request

Currently basePath is consumed during build step although this value could "easily" be changeable at runtime.

This can enable more flexibility during the deployment without the cost of build * basePath.

Describe the solution you'd like

Modifying the current behaviour of config.basePath might introduce a breaking change.

An option could be to add a config (maybe as env as: process.env.NEXT_RUNTIME_BASEPATH) and make it accessible in window.__NEX_DATA__ as basePath.

Such to have the option to do: process.env.NEXT_RUNTIME_BASEPATH || process.env.__NEXT_ROUTER_BASEPATH.

Which with webpack.plugins.DefinePlugin could be declared as such "process.env.NEXT_RUNTIME_BASEPATH": "window.__NEXT_DATA__.basePath".

Reference:

* [DefinePlugin usage](https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts#L265)

* [Example of usage of `process.env.__NEXT_ROUTER_BASEPATH`](https://github.com/vercel/next.js/blob/canary/packages/next/client/add-base-path.ts#L4)

Describe alternatives you've considered

Currently my workaround is:

* Declare a variable `process.env.BASEPATH` and expose to the client as `window.__CONFIG__.BASEPATH` and to the server as `global.__CONFIG__.BASEPATH`.

* Modify existing `process.env.__NEXT_ROUTER_BASEPATH` webpack definition in `DefinePlugin`:

  webpack(config, options) {
   config.plugins.forEach((i) => {
     if (i instanceof options.webpack.DefinePlugin) {
       if (i.definitions['process.env.__NEXT_ROUTER_BASEPATH']) {
         i.definitions['process.env.__NEXT_ROUTER_BASEPATH'] =
           '(typeof window === "undefined" ? global : window).__CONFIG__.BASEPATH';
       }
     }
   });
   return config;
 }`

* Add in `_document.tsx` the definition of `window.__CONFIG__`

Sorry, how can i add definition in _document.tsx?

[M3kH]

Something like this

        <script
          id="__GLOBAL_CONFIG__"
          dangerouslySetInnerHTML={{
            __html: `
              window.__CONFIG__ = ${JSON.stringify({})}; // or reference for some app configuration
            `,
          }}
        />

[LukNasc]

thanks

[LukNasc]

this not work for me, i've got this error:

  Collecting page data  .TypeError: Cannot read properties of undefined (reading 'BASEPATH')

 Build error occurred
Error: Failed to collect page data for /
    at C:\Users\user\DEV\project\node_modules\next\dist\build\utils.js:1258:15 {
  type: 'Error'
}
   Collecting page data  .

[Bingo1392]

Hi, do you have any update on this?

We are facing the same issue right now (next: 14.0.4). I am searching the internet for a solution with surprise to find nothing. Or am I missing something?

Thanks in advance.

[AlexanderZeilmann]

We are using an approach first mentioned here and it is working fine with next 14.

The rough idea is:

1. We set the basePath in the next.config.js to a value that does not appear anywhere else in our project e.g.:

basePath: '/__PATH_PREFIX__',

2. We then build the project normally.

3. When starting the project, we first replace the string everywhere in the project with the actual path we want to use (for technical reasons we are not using sed, but the idea is the same):

sed -i "s/__PATH_PREFIX__/DynamicURL/g"  *

The approach is certainly not ideal, but works for our situation. You also might want to add different handlings for dev and production environments.

[DiskCrasher]

Not having any success with this and ASSET_PREFIX. I end up with links where the prefix is prepended twice (i.e. "http://localhost/asset_prefix/asset_prefix/_next/static...") instead of just once. Next.js v14.2.

[remidebette]

Hi, any news on this from the next.js team?
Looking for a way to have the BASE_PATH as runtime to make applications 12 factor compliant while using nextjs

[E021ntox]

any updates?