Not-found page handling in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js not-found helper.

NextJS

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

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

AuseRouter

BLink

CnotFound

Dredirect

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'redirect' instead of 'notFound'.

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

The notFound function from next/navigation is used to trigger the 404 page in Next.js App Router.

2fill in blank

medium

Complete the code to call the function that shows the 404 page inside a React component.

NextJS

export default function Page() {
  if (!data) {
    [1]();
  }
  return <div>Content</div>;
}

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

AnotFound

Bredirect

CuseRouter

DLink

Attempts:

3 left

💡 Hint

Common Mistakes

Calling 'redirect()' instead of 'notFound()'.

Trying to return a component instead of calling the function.

Calling notFound() inside the component triggers Next.js to render the 404 page.

3fill in blank

hard

Fix the error in the code to correctly trigger the 404 page when no post is found.

NextJS

import { notFound } from 'next/navigation';

export default async function Post({ params }) {
  const post = await getPost(params.id);
  if (post === null) {
    [1];
  }
  return <article>{post.title}</article>;
}

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

Aredirect('/404')

Bnull

C<notFound />

DnotFound()

Attempts:

3 left

💡 Hint

Common Mistakes

Returning notFound() instead of calling it.

Trying to redirect to '/404' manually.

You must call notFound() as a function to trigger the 404 page. Returning it as JSX or redirecting manually is incorrect.

4fill in blank

hard

Fill both blanks to create a server component that fetches data and shows 404 if missing.

NextJS

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

export default async function User({ params }) {
  const user = await fetchUser(params.id);
  if (!user) {
    [2]();
  }
  return <div>{user.name}</div>;
}

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

AnotFound

Bredirect

CuseRouter

DLink

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'redirect' instead of 'notFound'.

Calling 'redirect()' instead of 'notFound()'.

Import and call notFound() to handle missing data by showing the 404 page.

5fill in blank

hard

Fill all three blanks to create a dynamic route page that fetches a product, shows 404 if missing, and displays the product name.

NextJS

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

export default async function ProductPage({ params }) {
  const product = await getProduct(params.[2]);
  if (!product) {
    [3]();
  }
  return <h1>{product.name}</h1>;
}

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

AnotFound

Bid

Dslug

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'slug' instead of 'id' for params.

Not calling 'notFound()' as a function.

Import and call notFound() to show 404. Use id from params to fetch the product.