Accessing Next from different URLs (Not root)

[Sletheren]

Bug report

I have tried to solve this before and opened a discussion feed about it,
But still seems to cause a lot of hassle on my project (saw a lot of other people complaining about it)

So my setup is as follows:

• I have a NextJS app, with a custom server.js & _app.js
• The app is hosted on AWS.
• The App can be accessed from different URLs: https://domain/germany/app, https://domain/france/app, https://domain/africa/morocco/app, ...etc
• Depending on the URL, we load specific configuration for the APP

The problem at the beginning was not able to access the app AT ALL, since Next tries to load the assets from the Root https://domain/ instead of https://domain/basePath

Current solution:
Is having a middleware in server.js to rewrite the URLs and remove the subdirectory:

  server.use(function (req, res, next) {
    const reqUrl = req.protocol + '://' + req.headers.host + req.url
    const config = loadConfigfromUrl(reqUrl)
    const basePath = config.basePath
    app.setAssetPrefix(basePath || '')
    req.url = req.url.replace(basePath, '') || '/'
    req.appConfig = config
    return next()
  })

This way if we access the app like https://domain/africa/morocco/app the basePath will be basePath=/africa/morocco then the request url will become after the rewrite: req.url=https://domain/app and we pass the configuration to the App in the request, so we can persist it in _app.js

The problems with this solution:

• Every Link in the app needs to be prefixed with config.subdirectory (Example: <Link href={'${config.basePath}/todos/${id}'}
• Every Asset needs to be prefixed as well src: 'url(${basePath}/static/font.ttf)'} an <img src={${basePath}/static/images/logo.svg}

But still on first load sometimes the appConfig that we pass from the server is empty which causes a huge number of 404 since the basePath is undefined...

Also, without app.setAssetPrefix(basePath || '') I get 404s for every asset Next tries to load.

I have looked at the proposal of introducing experimental.basePath 9872 but it won't work in my case, since there are multiple possible bathPaths that the app has, so setting that in build-time is not gonna work