Redirect function in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this Next.js redirect function runs?

Consider this Next.js server action code snippet that uses the redirect function. What will the user experience after this code runs?

NextJS

import { redirect } from 'next/navigation';

export default function Page() {
  redirect('/dashboard');
  return <p>Loading...</p>;
}

A The user is immediately sent to '/dashboard' without seeing 'Loading...'.

B The user sees 'Loading...' briefly, then is redirected to '/dashboard'.

C The page shows 'Loading...' and does not redirect.

D The code throws a runtime error because redirect cannot be used here.

💡 Hint

Think about how the redirect function interrupts rendering in Next.js server components.

In Next.js, calling redirect() in a server component immediately stops rendering and sends a redirect response to the browser. So the user never sees the returned JSX.

📝 Syntax

intermediate

Which option correctly imports and uses the redirect function in Next.js?

You want to redirect users to '/login' inside a server component. Which code snippet is correct?

A

import { redirect } from 'next/router';

export default function Page() {
  redirect('/login');
  return null;
}

B

import { redirect } from 'next/navigation';

export default function Page() {
  redirect('/login');
  return null;
}

C

import redirect from 'next/router';

export default function Page() {
  redirect('/login');
  return null;
}

D

import { redirect } from 'next/navigation';

export default function Page() {
  return redirect('/login');
}

💡 Hint

Check the official Next.js docs for the correct import path for redirect.

The redirect function is exported from 'next/navigation' and is called directly inside the component. It does not return JSX, so returning redirect(...) is incorrect.

❓ state_output

advanced

What is the output when redirect is conditionally called in this Next.js server component?

Analyze this code and determine what the user sees or experiences when visiting the page with query param ?auth=false.

NextJS

import { redirect } from 'next/navigation';

export default function Page({ searchParams }) {
  if (searchParams.auth === 'false') {
    redirect('/signin');
  }
  return <p>Welcome, authenticated user!</p>;
}

A User is redirected to '/signin' immediately if auth is 'false'.

B User sees 'Welcome, authenticated user!' even if auth is 'false'.

C The page crashes with a runtime error because redirect is conditional.

D User sees a blank page with no content.

💡 Hint

Remember how redirect interrupts rendering when called.

If the condition is met, redirect sends a redirect response immediately, so the JSX is never rendered.

🔧 Debug

advanced

Why does this Next.js redirect code cause a runtime error?

Identify the cause of the error in this code snippet.

NextJS

'use client';
import { redirect } from 'next/navigation';

export default function Page() {
  if (typeof window !== 'undefined') {
    redirect('/home');
  }
  return <p>Redirecting...</p>;
}

A redirect must be called inside useEffect, not directly in the component.

B redirect requires an async function but Page is not async.

C redirect is called on the client side, but it only works in server components.

D redirect requires a full URL, not a relative path.

💡 Hint

Think about where redirect can be used in Next.js architecture.

redirect from 'next/navigation' only works in server components or server actions. Checking for window means this runs on client side, causing an error.

🧠 Conceptual

expert

What is the main difference between redirect() and useRouter().push() in Next.js?

Choose the statement that best explains how redirect() differs from useRouter().push() in Next.js routing.

A redirect() and useRouter().push() are interchangeable and behave the same way.

B redirect() changes the URL without reloading; useRouter().push() reloads the entire page from the server.

C redirect() is used only in client components; useRouter().push() is used only in server components.

D redirect() runs on the server and sends an HTTP redirect response; useRouter().push() runs on the client and changes the URL without a full reload.

💡 Hint

Consider where each function runs and how the browser reacts.

redirect() is a server-side function that sends a redirect HTTP response, causing a full navigation. useRouter().push() is a client-side method that changes the URL and updates the page without a full reload.

Practice

1. What is the main purpose of the redirect function in Next.js?

easy

A. To fetch data from an API

B. To send users automatically to a different page

C. To style components dynamically

D. To create new server routes

Solution

1. Step 1: Understand the redirect function role

   The redirect function is designed to change the current page to another URL automatically.

2. Step 2: Compare with other options

   Fetching data, styling, or creating routes are unrelated to redirect's purpose.

3. Final Answer:

   To send users automatically to a different page -> Option B

4. Quick Check:

   Redirect = page navigation [OK]

Hint: Redirect means sending user to another page automatically [OK]

Common Mistakes:

• Confusing redirect with data fetching
• Thinking redirect styles components
• Assuming redirect creates routes

2. Which of the following is the correct way to import and use the redirect function in a Next.js server component?

easy

A. import { redirect } from 'next/navigation'; redirect('/home');

B. import redirect from 'next/router'; redirect('/home');

C. import { redirect } from 'next/router'; redirect('/home');

D. import redirect from 'next/navigation'; redirect('/home');

Solution

1. Step 1: Identify correct import source

   The redirect function is imported from 'next/navigation' as a named import.

2. Step 2: Check usage syntax

   Calling redirect('/home') after import is correct usage.

3. Final Answer:

   import { redirect } from 'next/navigation'; redirect('/home'); -> Option A

4. Quick Check:

   Correct import and call from next/navigation [OK]

Hint: Use named import from 'next/navigation' for redirect [OK]

Common Mistakes:

• Importing redirect from 'next/router' instead
• Using default import instead of named import
• Calling redirect without importing

3. Consider this Next.js server component code snippet:

import { redirect } from 'next/navigation';

export default function Page() {
  const isLoggedIn = false;
  if (!isLoggedIn) {
    redirect('/login');
  }
  return <h1>Welcome</h1>;
}

What will the user see when visiting this page?

medium

A. A runtime error occurs

B. The user sees the text 'Welcome'

C. The page shows a blank screen

D. The user is redirected to '/login' page automatically

Solution

1. Step 1: Analyze the condition for redirect

   The variable isLoggedIn is false, so the condition !isLoggedIn is true, triggering redirect('/login').

2. Step 2: Understand redirect effect in server component

   Calling redirect sends the user to '/login' immediately, so the return statement is not reached.

3. Final Answer:

   The user is redirected to '/login' page automatically -> Option D

4. Quick Check:

   Redirect triggers when not logged in [OK]

Hint: If redirect runs, page content won't show [OK]

Common Mistakes:

• Thinking the return content still renders
• Assuming redirect causes error
• Ignoring the condition logic

4. This Next.js server component code has a mistake. What is the mistake?

import { redirect } from 'next/navigation';

export default function Page() {
  redirect('/dashboard');
  return <h1>Dashboard</h1>;
}

medium

A. Returning JSX after redirect call

B. Calling redirect outside a conditional or event handler

C. Using redirect in a client component

D. Missing async keyword on the function

Solution

1. Step 1: Understand redirect behavior

   Calling redirect immediately stops rendering and sends a redirect response.

2. Step 2: Check code after redirect call

   Returning JSX after redirect is invalid because redirect does not allow further rendering.

3. Final Answer:

   Returning JSX after redirect call -> Option A

4. Quick Check:

   Redirect stops rendering, no return allowed after [OK]

Hint: Do not return JSX after calling redirect [OK]

Common Mistakes:

• Thinking redirect can be called in client components
• Calling redirect without conditions is allowed
• Forgetting redirect stops rendering

5. You want to redirect users to '/profile' only if they are logged in, otherwise to '/login'. Which code correctly implements this logic in a Next.js server component?

hard

A. import { redirect } from 'next/navigation';

export default function Page() {
const loggedIn = true;
if (loggedIn) {
redirect('/login');
} else {
redirect('/profile');
}
return null;
}

B. import { redirect } from 'next/navigation';

export default function Page() {
const loggedIn = false;
if (loggedIn) {
redirect('/login');
} else {
redirect('/profile');
}
return null;
}

C. import { redirect } from 'next/navigation';

export default function Page() {
const loggedIn = false;
if (!loggedIn) {
redirect('/login');
} else {
redirect('/profile');
}
return null;
}

D. import { redirect } from 'next/navigation';

export default function Page() {
const loggedIn = true;
if (!loggedIn) {
redirect('/profile');
} else {
redirect('/login');
}
return null;
}

Solution

1. Step 1: Understand the logic needed

   If user is logged in, send to '/profile'; if not, send to '/login'.

2. Step 2: Match code logic with requirement

   import { redirect } from 'next/navigation'; export default function Page() { const loggedIn = false; if (!loggedIn) { redirect('/login'); } else { redirect('/profile'); } return null; } checks if not logged in, redirects to '/login', else to '/profile', matching the requirement.

3. Final Answer:

   Option C code correctly implements the redirect logic -> Option C

4. Quick Check:

   Redirect to login if not logged in, else profile [OK]

Hint: Redirect to login if NOT logged in, else profile [OK]

Common Mistakes:

• Swapping redirect URLs for logged in and not logged in
• Using wrong condition negation
• Returning JSX after redirect