Fix Error: ERR_TOO_MANY_REDIRECTS: Redirect loop detected in middleware in Next.js

This error occurs when Next.js middleware creates an infinite redirect loop by redirecting to a URL that also triggers the middleware, which redirects again endlessly. Fix it by adding a condition to skip the redirect when the request already matches the target URL or by using a matcher config to exclude the redirect target.

Reading the Stack Trace

Here's what each line means:

• at middleware (/app/src/middleware.ts:12:14): The middleware at line 12 issues a redirect that triggers the same middleware again, creating the infinite loop.
• at async DevServer.runMiddleware (/app/node_modules/next/dist/server/next-server.js:395:26): The Next.js server runs middleware on every matching request, including the redirect target.
• at async handleRequest (/app/node_modules/next/dist/server/lib/router-server.js:350:24): The router server processes the redirected request, which re-enters the middleware pipeline.

Common Causes

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

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token');
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

import { NextResponse } from 'next/server';

export function middleware(request) {
  if (!request.cookies.get('session')) {
    return NextResponse.redirect(new URL('/auth/signin', request.url));
  }
}

// No export const config = { matcher: [...] }

export function middleware(request) {
  const locale = request.headers.get('accept-language')?.split(',')[0];
  if (locale?.startsWith('fr')) {
    return NextResponse.redirect(new URL(`/fr${request.nextUrl.pathname}`, request.url));
  }
}

The Fix

Add a matcher configuration that excludes the /login path, static assets, and other public routes from middleware processing. This prevents the redirect loop because the middleware no longer runs on the redirect target.

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

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token');
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

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

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token');
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

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

Testing the Fix

import { NextRequest } from 'next/server';
import { middleware } from '@/middleware';

function createRequest(url: string, cookies: Record<string, string> = {}) {
  const req = new NextRequest(new URL(url, 'http://localhost:3000'));
  Object.entries(cookies).forEach(([k, v]) => req.cookies.set(k, v));
  return req;
}

describe('middleware', () => {
  it('redirects unauthenticated users to /login', () => {
    const res = middleware(createRequest('/dashboard'));
    expect(res?.status).toBe(307);
    expect(res?.headers.get('location')).toContain('/login');
  });

  it('allows authenticated users through', () => {
    const res = middleware(createRequest('/dashboard', { 'auth-token': 'valid' }));
    expect(res?.status).toBe(200);
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/middleware-redirect-loop,git add src/middleware.ts src/__tests__/middleware.test.ts,git commit -m "fix: add matcher config to prevent middleware redirect loop",git push origin fix/middleware-redirect-loop

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --coverage
      - run: npm run build

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

npm install bugstack-sdk

import { initBugStack } from 'bugstack-sdk'

initBugStack({ apiKey: process.env.BUGSTACK_API_KEY })

Deploying the Fix (Manual Path)

1. Run the test suite locally to verify the middleware works without redirect loops.
2. Open a pull request with the matcher configuration.
3. Wait for CI checks to pass on the PR.
4. Have a teammate review and approve the PR.
5. Merge to main and test authentication flow in staging.

Frequently Asked Questions