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.