Not-found.tsx customization in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Not Found page component in Next.js.

NextJS

export default function NotFound() {
  return <h1>[1]</h1>;
}

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

A"404 Error"

B"Page not found"

C"Welcome"

D"Home Page"

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated messages like 'Welcome' or 'Home Page'.

The Not Found page should clearly indicate the page is missing, so "Page not found" is the best message.

2fill in blank

medium

Complete the code to add a button that navigates back to the home page using Next.js Link.

NextJS

import Link from 'next/link';

export default function NotFound() {
  return (
    <div>
      <h1>Page not found</h1>
      <Link href=[1]>
        <a>Go Home</a>
      </Link>
    </div>
  );
}

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

A"/"

B"/about"

C"/contact"

D"/404"

Attempts:

3 left

💡 Hint

Common Mistakes

Using other URLs like '/about' or '/contact' which are not home.

The home page URL is "/", so the Link should point there to navigate home.

3fill in blank

hard

Fix the error in the Not Found component by correctly importing the useRouter hook from Next.js.

NextJS

import [1] from 'next/router';

export default function NotFound() {
  const router = useRouter();
  return <button onClick={() => router.push('/')}>Go Home</button>;
}

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

ARouter

BuseRoute

Crouter

DuseRouter

Attempts:

3 left

💡 Hint

Common Mistakes

Misspelling the hook name or using incorrect casing.

The correct hook to import for routing in Next.js is useRouter from 'next/router'.

4fill in blank

hard

Fill both blanks to create a Not Found page that uses a semantic <main> and includes an aria-label for accessibility.

NextJS

export default function NotFound() {
  return (
    <[1] aria-label=[2]>
      <h1>Page not found</h1>
    </[1]>
  );
}

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

Amain

B"main content"

C"navigation"

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of

or wrong aria-label values.

Using main marks the main content area, and aria-label="main content" helps screen readers understand the section.

5fill in blank

hard

Fill all three blanks to create a responsive Not Found page with a centered message and a button styled using Tailwind CSS.

NextJS

export default function NotFound() {
  return (
    <div className=[1]>
      <h1 className=[2]>Page not found</h1>
      <button className=[3]>Go Home</button>
    </div>
  );
}

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

A"flex flex-col items-center justify-center min-h-screen"

B"text-3xl font-bold mb-4"

C"bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400"

D"p-4 m-2 border"

Attempts:

3 left

💡 Hint

Common Mistakes

Not centering content or missing focus styles on the button.

The container uses flexbox to center content vertically and horizontally. The heading is large and bold with margin below. The button has blue background, white text, padding, rounded corners, and focus styles for accessibility.