Optionally add locale before basepath

[nsmith7989]

Describe the feature you'd like to request

We have several apps on the same domain and we have a requirement that locale is the first part of the path.

https://example.com/en/app1/page
https://example.com/en/app2/page

We would like to use bathPath and i18n routing together, it looks like we'd have to rearrange our urls to be

https://example.com/app1/en/page
https://example.com/app2/en/page

Describe the solution you'd like

Add an option in next.config.js that can reverse basePath and locale.

module.exports = {
   basePath: 'app1',
   i18n: {
      ...
   },
   localeBeforeBasePath: true
}

Describe alternatives you've considered

Our current solution to accomplish this url pattern a bit convoluted.

1. We add our "basePath" in the filesystem routes i.e., pages/[language]/app1/page1.jsx
2. We use assetPrefix so that our load balancer knows which app to point to for static assets assetPrefix: /app1
3. Then we use a custom server to strip the assetPrefix before calling nextjs's handler.

const expressApp = express();
expressApp.all('*', (req, res) => {
  req.url = req.url ? req.url.replace(`/app1`, '') : '';
  handle(req, res));
})

This works fine except for any calls to /_next/data. Since those calls intentionally do not get assetPrefix added, our load balancer does not know where to send those requests. BasePath would be the solution, but then our url structure would need to change.

[borantula]

we also hit the same roadblock in our setup.
we have our services on specific paths. And we also have the locale structure in url, so it goes like domain.com/{locale}/{app_path} or domain.com/en/mynextapp
since using basePath with i18n locales as above is currently impossible we tried to go with assetPrefix and nextjs folder structure to reflect our routing [locale]/mynextapp/index.js etc.
Which worked for static pages but breaking for /_next/data. And despite the fact in the docs it says _next/data requests are always made against domain, when basePath is used, it actually adds mynextapp/_next/data, so I think it means it can actually be possible to use it.

[simpsonphile]

any ideas on how to solve it?
I have an application in the subdirectory /app
on localhost, I'm using basePath + assetPrefix set to /app
on server I'm using assetPrefix set to /app

when I add /app in next/router next/link href it will give me URL /[locale]/app/pageName
desired URL: /app/[locale]/pageName

[gustavobini]

I have just faced this problem today and it's a massive blocker for our use case.

[robertwbradford]

I would love to see something like the following syntax when basePath is used with i18n routing: #17078 (reply in thread)

[borantula]

so in the end what we did was using middleware to set locale (we get it via a header value from our nginx setup). So new middleware came to the rescue on this.

And instead of using basePath we handled same thing with folder structure.
So with code
Instead of basePath: /my-app we're now using pages/my-app folder as base of our app

and in pages/my-app/_middleware.ts

import { NextRequest, NextResponse } from 'next/server';

export function middleware(req: NextRequest) {
  const { pathname } = req.nextUrl;
  const locale = req.headers.get('X-Locale') || 'en';
  const hostname = req.headers.get('host');

  const newUrl = new URL(`${locale}${pathname}`, `https://${hostname}/`);

  return NextResponse.rewrite(newUrl.toString());
}

[hunganhAtWhill]

@borantula this solution works if you do not use _next/image optimization pipeline / API.
If you do use _next/image and want to have multiple nextjs applications under 1 domain with following URL structure
{domain}/{locale}/{basePath}, currently it is not possible I think. With basePath settings, it will always be {domain}/{basePath}/{locale} which can be a not very standard / expected URL structure for global websites. So I do believe something like localeBeforeBasePath: true is very valuable in some use cases.

[nicolama-dev]

We are exactly in the same situation and would use right away that basePath option if available

[Jordaneisenburger]

Also running into this issue, where we want /pl-pl/shop for example which doesn't seem to be possible.

[VadimZhiltsov]

Is this item in the roadmap?

[hunganhAtWhill]

bump