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.

Practice

1. What is the main purpose of the not-found.tsx file in a Next.js app?

easy

A. To define the main layout of the website

B. To handle user authentication

C. To customize the page shown when a user visits a missing URL

D. To manage API routes

Solution

1. Step 1: Understand the role of not-found.tsx

   This file is specifically for customizing the page shown when a user tries to access a page that does not exist.

2. Step 2: Compare with other options

   Other options like layout, authentication, or API routes are handled by different files or folders in Next.js.

3. Final Answer:

   To customize the page shown when a user visits a missing URL -> Option C

4. Quick Check:

   Missing page display = Custom not-found.tsx [OK]

Hint: Remember: not-found.tsx shows missing page content [OK]

Common Mistakes:

• Confusing not-found.tsx with layout or API files
• Thinking it handles authentication
• Assuming it manages site navigation

2. Which of the following is the correct way to export a default React component in not-found.tsx?

easy

A. default export function NotFound() { return Page Not Found; }

B. function NotFound() { return Page Not Found; } export NotFound;

C. export function NotFound() { return Page Not Found; }

D. export default function NotFound() { return Page Not Found; }

Solution

1. Step 1: Recall correct default export syntax

   In React with Next.js, the correct way is to write export default function ComponentName() { ... }.

2. Step 2: Check each option

   export default function NotFound() { return

   Page Not Found

   ; } matches the correct syntax. function NotFound() { return

   Page Not Found

   ; } export NotFound; has incorrect export syntax. export function NotFound() { return

   Page Not Found

   ; } exports a named function, not default. default export function NotFound() { return

   Page Not Found

   ; } uses invalid syntax.

3. Final Answer:

   export default function NotFound() { return <h1>Page Not Found</h1>; } -> Option D

4. Quick Check:

   Default export = export default function [OK]

Hint: Default export uses 'export default function' syntax [OK]

Common Mistakes:

• Using named export instead of default
• Incorrect export keyword placement
• Missing 'default' keyword

3. Given this not-found.tsx component, what will be displayed when a user visits a missing page?

export default function NotFound() {
  return (
    <main role="main">
      <h1>Oops! Page not found.</h1>
      <p>Try going back or visit the homepage.</p>
      <a href="/">Home</a>
    </main>
  );
}

medium

A. A page with a heading 'Oops! Page not found.', a paragraph, and a link to Home

B. A blank page with no content

C. An error message in the browser console only

D. A redirect to the homepage without showing any message

Solution

1. Step 1: Read the returned JSX

   The component returns a main section with a heading, paragraph, and a link to the homepage.

2. Step 2: Understand what renders on missing page

   When a page is missing, this component renders the content exactly as coded, showing the heading, paragraph, and link.

3. Final Answer:

   A page with a heading 'Oops! Page not found.', a paragraph, and a link to Home -> Option A

4. Quick Check:

   JSX content renders as visible page elements [OK]

Hint: JSX inside return shows on missing page [OK]

Common Mistakes:

• Thinking it redirects automatically
• Assuming no content shows
• Confusing console errors with UI output

4. Identify the error in this not-found.tsx code snippet:

export default function NotFound() {
  return (
    <div>
      <h1>Page Not Found</h1>
      <a href="/">Go Home</a>
    </div>
  )
}

medium

A. Using <div> instead of <main> for accessibility

B. No error; code is valid and works correctly

C. Missing semicolon after return statement

D. Missing parentheses around JSX

Solution

1. Step 1: Check JSX syntax

   The JSX is correctly wrapped and returned; no syntax errors or missing semicolons needed after return.

2. Step 2: Consider accessibility best practices

   Using <main> instead of <div> improves accessibility by defining the main content region.

3. Final Answer:

   Using <div> instead of <main> for accessibility -> Option A

4. Quick Check:

   Use <main> for main content in error pages [OK]

Hint: Use <main> tag for main content, not just <div> [OK]

Common Mistakes:

• Thinking semicolons are required after return
• Ignoring accessibility tags
• Assuming JSX needs extra parentheses

5. You want your not-found.tsx page to show a custom message only if the user is on a mobile device, otherwise show a default message. Which approach fits Next.js best?

hard

A. Create two separate not-found.tsx files, one for mobile and one for desktop

B. Use a React hook like useEffect with window.navigator.userAgent to detect device and conditionally render

C. Use CSS media queries to hide/show different messages in the same component

D. Write server-side code in not-found.tsx to detect device from request headers and render accordingly

Solution

1. Step 1: Understand client vs server rendering

   Device detection using window.navigator.userAgent works only on client side, so use React hooks like useEffect.

2. Step 2: Evaluate other options

   Server-side detection is complex and not typical in not-found.tsx. CSS media queries only style but don't change content. Multiple files for one route is invalid.

3. Final Answer:

   Use a React hook like useEffect with window.navigator.userAgent to detect device and conditionally render -> Option B

4. Quick Check:

   Client detection with hooks = best for device-specific UI [OK]

Hint: Detect device client-side with hooks, not server or multiple files [OK]

Common Mistakes:

• Trying to detect device server-side in this file
• Using multiple not-found.tsx files
• Relying only on CSS for content changes