How to Use Redirect in Next.js: Simple Guide

In Next.js, you can use the redirect function inside server components or API routes to send users to another URL. For static or server-side rendering, use the redirect property in getServerSideProps or the new redirect helper in Next.js 13+ app directory.

Syntax

Next.js provides different ways to redirect users depending on the rendering method:

• Server-side redirect: Use redirect inside getServerSideProps by returning an object with a redirect key.
• App Router redirect: Use the redirect() function from next/navigation inside server components or server actions.

This lets you send users to another page before rendering.

typescript

export async function getServerSideProps() {
  return {
    redirect: {
      destination: '/new-page',
      permanent: false
    }
  };
}

// OR in app directory server component
import { redirect } from 'next/navigation';

export default function Page() {
  redirect('/new-page');
}

Example

This example shows a server-side redirect using getServerSideProps to send users from /old-page to /new-page. It also shows the new app router redirect inside a server component.

typescript

// pages/old-page.js
export async function getServerSideProps() {
  return {
    redirect: {
      destination: '/new-page',
      permanent: false
    }
  };
}

export default function OldPage() {
  return null; // This won't render because of redirect
}

// app/old-page/page.tsx (Next.js 13+ app router)
import { redirect } from 'next/navigation';

export default function OldPage() {
  redirect('/new-page');
  return null; // unreachable
}

Output

User visiting /old-page is immediately redirected to /new-page without seeing old-page content.

Common Pitfalls

Common mistakes when using redirects in Next.js include:

• Trying to use redirect() in client components, which is not allowed because it only works on the server.
• Forgetting to return the redirect object inside getServerSideProps, causing the page to render instead of redirect.
• Using permanent redirects (permanent: true) incorrectly, which can cause browsers to cache the redirect.

typescript

// Wrong: redirect() in client component
'use client';
import { redirect } from 'next/navigation';

export default function ClientComponent() {
  redirect('/new-page'); // Error: redirect only works on server
  return <div>Redirecting...</div>;
}

// Right: use redirect() in server component
import { redirect } from 'next/navigation';

export default function ServerComponent() {
  redirect('/new-page');
  return null;
}

Quick Reference

Method	Where to Use	How to Use	Notes
getServerSideProps redirect	pages directory	Return { redirect: { destination, permanent } }	Runs on server, good for dynamic redirects
redirect() function	app directory server components	Call redirect('/path') from next/navigation	Only in server components or server actions
Client-side redirect	client components	Use useRouter().push('/path')	For user-triggered navigation, not automatic redirects

Key Takeaways

Use the redirect object in getServerSideProps for server-side redirects in pages directory.

In Next.js 13+ app router, use the redirect() function inside server components for immediate redirects.

Never call redirect() inside client components; use router.push() for client-side navigation instead.

Set permanent to true only for permanent redirects to avoid caching issues.

Redirects happen before the page renders, so users won't see the original page content.