Guard protected pages
A Server Component checks authentication or authorization before rendering protected content.
Next.js 16+ · Function
redirect
redirect sends users to another URL from supported App Router server contexts and during Client Component rendering. It ends the current control flow and has context-dependent browser-history and HTTP-status behavior.
How it works
Import redirect from next/navigation and call it when a condition requires navigation to another URL. It can run during rendering in Server or Client Components, in Route Handlers, and in Server Functions; the call interrupts execution rather than returning a value.
Syntax
redirect(path, type)Parameters
| Name | Type | Description |
|---|---|---|
path | string | The URL to redirect to. It can be relative or absolute. |
type | 'replace' | 'push' | The history operation: replace by default, or push by default in Server Actions. |
Returns
Does not return a value.
Key points
- Use redirect when application logic decides that the current URL should be replaced by another destination.
- Its signature is redirect(path, type), where type controls the browser history operation.
- The destination accepts either a relative path such as /login or an absolute URL.
- The optional type selects push or replace history behavior.
- Do not assign a result from redirect or expect subsequent rendering to receive a return value.
Common mistakes
- Because redirect uses an exception for control flow, call it outside a try block or avoid catching the redirect unintentionally.
- In a Client Component event handler, use the useRouter hook instead of redirect.
- Expect a 307 response outside Server Actions; Server Actions use a 303 response for the navigation.
Example: Redirect from a Server Component
import { redirect } from 'next/navigation'
export default function Page() {
const authenticated = false
if (!authenticated) {
redirect('/login')
}
return <h1>Dashboard</h1>
}This Server Component sends unauthenticated visitors to the login page before rendering the dashboard.
When to use it
Navigate after a mutation
A Server Function completes a mutation and then navigates to the resulting resource.
Route-level navigation
A Route Handler determines that an incoming request should go elsewhere.
Interview questions
QWhat does redirect accept and return?
redirect(path, type) accepts a destination path and an optional history behavior. The path may be relative or absolute, and the function does not return a value because it terminates the current control flow.
Follow-up: How does history behavior differ by context? Server Actions default to push, while other contexts default to replace; passing type overrides that default.
QWhere can redirect be used?
The function works in Server Components, Route Handlers, and Server Functions, and it can also run while rendering a Client Component. It is commonly used when a condition such as authentication or a completed mutation requires another URL.
Follow-up: What should be used in a Client Component event handler? Use useRouter, because redirect is not supported in event handlers.
QHow does redirect affect browser history and status codes?
A redirect normally uses replace behavior, while a Server Action defaults to push behavior. The optional type argument lets the caller choose replace or push explicitly.
Follow-up: What HTTP status is associated with the operation? It uses 307 in other contexts and 303 in a Server Action.
Related
permanentRedirectuseRouterNextResponse.redirect