How to Solve Error: NEXT_REDIRECT error

The ‘Error: NEXT_REDIRECT’ error occurs in Next.js when redirect functions are called inappropriately, such as in server components where they’re not expected or in contexts where they can’t properly execute.

How the Error Happens

❌ Error Scenario:

// ❌ This causes the error
// app/page.js
import { redirect } from 'next/navigation';

export default function HomePage() {
  // ❌ Calling redirect in a component that renders JSX
  if (someCondition) {
    redirect('/dashboard'); // ❌ Error: NEXT_REDIRECT
  }
  
  return <div>Home Page</div>;
}

✅ Quick Fix - Proper Redirect Usage

Solution 1: Use Redirect in Server Actions or Route Handlers

// ✅ In a server action
'use server';

import { redirect } from 'next/navigation';

export async function login(formData) {
  const user = await authenticate(formData);
  
  if (user) {
    redirect('/dashboard'); // ✅ Works in server actions
  }
}

// ✅ In a route handler (app/api/route.js)
import { NextResponse } from 'next/server';
import { redirect } from 'next/navigation';

export async function POST(request) {
  // Process request
  if (condition) {
    redirect('/success'); // ✅ Works in route handlers
  }
  
  return NextResponse.json({ success: true });
}

Solution 2: Use Client-Side Navigation

// ✅ In client components, use useRouter
'use client';

import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

export default function ProtectedPage() {
  const router = useRouter();
  
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (!token) {
      router.push('/login'); // ✅ Client-side navigation
    }
  }, [router]);
  
  return <div>Protected Content</div>;
}

Solution 3: Use Redirect in Server Components Properly

// ✅ In server components, call redirect before any JSX
import { redirect } from 'next/navigation';

export default async function DashboardPage() {
  // ✅ Check condition and redirect before rendering
  const session = await getSession();
  if (!session) {
    redirect('/login'); // ✅ Must be called before any JSX
  }
  
  // ✅ Only render after ensuring user has access
  return <div>Dashboard Content</div>;
}

Solution 4: Handle Redirects in Middleware

// ✅ In middleware.js
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // ✅ Redirect based on conditions
  if (request.nextUrl.pathname.startsWith('/admin')) {
    const token = request.cookies.get('auth_token');
    if (!token) {
      return NextResponse.redirect(new URL('/login', request.url));
    }
  }
  
  return NextResponse.next();
}

export const config = {
  matcher: ['/admin/:path*', '/dashboard/:path*'],
};