Redirect function in NextJS - Step-by-Step Execution

Concept Flow - Redirect function

User requests a page

↓

Server Component runs redirect function

↓

Redirect function returns a redirect response

↓

Browser receives redirect response

↓

Browser navigates to new URL

↓

New page loads

The redirect function runs when a page is requested, sends a redirect response, and the browser navigates to the new URL.

Execution Sample

NextJS

import { redirect } from 'next/navigation';

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

This code redirects the user from the current page to '/new-page' immediately when the component runs.

Execution Table

Step	Action	Function Call	Result	Browser Behavior
1	Page requested	Page component starts	Component runs	Browser waits
2	Redirect function called	redirect('/new-page')	Redirect response sent	Browser receives redirect
3	Browser navigates	N/A	Loads '/new-page'	New page loads
4	End	N/A	Redirect complete	User sees new page

💡 Redirect function sends a redirect response, so original page does not render; browser navigates to new URL.

Variable Tracker

Variable	Start	After redirect call	Final
redirect URL	undefined	'/new-page'	'/new-page'

Key Moments - 2 Insights

Why does the original page not render after calling redirect?

Because the redirect function immediately sends a redirect response (see execution_table step 2), stopping further rendering.

Is redirect function client-side or server-side in Next.js?

It runs in Server Components before rendering, so the redirect happens before the page loads (see concept_flow).

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what does the redirect function do?

A Waits for user input

B Renders the current page content

C Sends a redirect response to the browser

D Loads the new page immediately

💡 Hint

Check the 'Result' column at step 2 in execution_table.

At which step does the browser start loading the new page?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Browser Behavior' column in execution_table.

If the redirect URL changed to '/home', what would be the final value of 'redirect URL' in variable_tracker?

A '/home'

B '/new-page'

C undefined

D null

💡 Hint

See how 'redirect URL' changes after redirect call in variable_tracker.

Concept Snapshot

Redirect function in Next.js:
- Used to send user to a different URL
- Called inside Server Components
- Stops current page rendering
- Browser navigates to new URL
- Syntax: redirect('/target-path')

Full Transcript

When a user requests a page in Next.js, the redirect function can be called inside the page component. This function immediately sends a redirect response to the browser, telling it to load a different URL. Because of this, the original page does not render. The browser then navigates to the new URL and loads that page. This process happens in Server Components before the page is sent to the browser. The redirect function is simple to use: just call redirect('/new-path') inside your component. This makes navigation smooth and fast without rendering unwanted content.