Redirect function in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the redirect function from Next.js.

NextJS

import { [1] } from 'next/navigation';

Drag options to blanks, or click blank then click option'

AuseRouter

BuseState

CLink

Dredirect

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useRouter instead of redirect.

Trying to import redirect from 'next/router' instead of 'next/navigation'.

The redirect function is imported from next/navigation to perform client-side redirects.

2fill in blank

medium

Complete the code to redirect the user to the home page inside a server component.

NextJS

export default function Page() {
  [1]('/');
  return <p>Redirecting...</p>;
}

Drag options to blanks, or click blank then click option'

Aredirect

Bnavigate

Crouter.push

DuseRouter()

Attempts:

3 left

💡 Hint

Common Mistakes

Using useRouter() which is a hook for client components.

Trying to call router.push inside a server component.

Calling redirect with the target path immediately redirects the user in a server component.

3fill in blank

hard

Fix the error in the redirect usage inside a server action.

NextJS

import { redirect } from 'next/navigation';

export async function submitForm() {
  // some logic
  [1]('/success');
}

Drag options to blanks, or click blank then click option'

Aredirect

Bnavigate

Cwindow.location.href =

Drouter.push

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use router.push which is not available in server actions.

Using window.location.href which is client-side only.

Inside server actions, you must use the redirect function from next/navigation to perform redirects.

4fill in blank

hard

Fill both blanks to create a server component that redirects if a condition is met.

NextJS

import { [1] } from 'next/navigation';

export default function Page({ isLoggedIn }) {
  if (!isLoggedIn) {
    [2]('/login');
  }
  return <p>Welcome back!</p>;
}

Drag options to blanks, or click blank then click option'

Aredirect

BuseRouter

Crouter.push

Dnavigate

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useRouter instead of redirect.

Calling router.push inside a server component.

Both the import and the function call use redirect to send users to the login page if not logged in.

5fill in blank

hard

Fill all three blanks to create a server action that redirects after form submission.

NextJS

import { [1] } from 'next/navigation';

export async function submitData(data) {
  // process data
  if (data.success) {
    [2]('/thank-you');
  } else {
    [3]('/error');
  }
}

Drag options to blanks, or click blank then click option'

Aredirect

Brouter.push

Dnavigate

Attempts:

3 left

💡 Hint

Common Mistakes

Using router.push which is client-side only.

Trying to import redirect multiple times with different names.

The redirect function is imported once and used twice to redirect to different pages based on success.

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