redirects don't work properly with i18n and basepath

[ckeeney]

What version of Next.js are you using?

10.0.5

What version of Node.js are you using?

12.16.1

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

docker / k8s

Describe the Bug

I'm developing a nextjs app that should be deployed at /my-base-path. I wanted to redirect / to /my-base-path, and I setup next.config.js accordingly:

const basePath = '/my-base-path';

const nextConfig = {
    basePath,
    env: {
        BASE_PATH: basePath,
    },
    redirects: async () => ([
        {
            source: '/',
            destination: basePath,
            permanent: false,
            basePath: false,
        },
    ])
};
module.exports = nextConfig;

Everything works as expected: / redirects to /my-base-path.

Once I add an i18n config to nextConfig, redirects don't function as I expect:

const basePath = '/my-base-path';

const nextConfig = {
    basePath,
    env: {
        BASE_PATH: basePath,
    },
    i18n: {
        defaultLocale: 'en',
        locales: ['en', 'es'],
    },
    redirects: async () => ([
        {
            source: '/',
            destination: basePath,
            permanent: false,
            basePath: false,
        },
    ])
};
module.exports = nextConfig;

Expected Behavior

• / should redirect to /my-base-path, but / just returns a 404.
• /en redirects to /en/my-base-path, and /en/my-base-path returns a 404.
• /my-base-path/en renders the welcome page, but I would expect it to redirect to /my-base-path.
• /my-base-path renders the welcome page as expected. 👍

To Reproduce

A repo demonstrating this behavior exists at https://github.com/ckeeney/nextjs-redirect-i18n-basepath

It's unclear to me whether the correct path structure is /{locale}/{basePath}/{page} or /{basePath}/{locale}/{page}.

I think the former would make a more consistent URL pattern across multiple zones, but I'm a bit nervous about how complicated that would make the routing rules for the reverse proxy. For the latter option we can simply route all traffic for each base path to it's designated nextjs app, matching on basePath as you would expect. The former requires that the load balancer have some way of handling the locales, and I'm not sure the more predictable locale URLs are worth that trouble.

[ckeeney]

Possibly related to #21040, #19574, #20488

[giovas94]

Any update about this issue? Tks

[geminiyellow]

hi, nobody care this?

[aksperiod]

+1

[amosbastian]

I am having the same problem while using their multi zone example with i18n and have posted about it here. Maybe the new middleware can help with this problem? 🤔

[gsambrotta]

Same here, trying to use the multi zone example and having problem with /en/blog/

[dannyblv]

Nextjs12 and still this bug exists, how did you guys solve it without using custom server ? Share your work around with me please(:

Edit: best solution so far was using middleware.js

...
import nextConfig from '../next.config';

export function middleware(request: NextRequest) {
  const {pathname, href} = request.nextUrl;

  if (pathname === '/' && !href.includes(nextConfig.basePath)) {
    return NextResponse.redirect(new URL(nextConfig.basePath, request.url));
  }
}

[Kaherdin]

Still no update about this ?
I want to add a basePath different for each locale but I struggle to find the best solution.