Not-found.tsx customization in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

The not-found.tsx file defines a custom 404 page that shows when a user visits a URL that does not match any route in the app.

intermediate

How do you trigger the not-found.tsx page programmatically in Next.js?

You can call the notFound() function from next/navigation inside a server component or route handler to show the custom 404 page.

beginner

Which React component type should you use for not-found.tsx in Next.js 13+?

Use a functional React component as a Server Component by default. It can be async if you need to fetch data.

beginner

Can you add custom styles and layout to not-found.tsx?

Yes, you can add any React elements, CSS modules, or Tailwind CSS classes to style the 404 page to match your app's design.

intermediate

What is a good accessibility practice when customizing the not-found.tsx page?

Use semantic HTML like <main> and <h1> for the main message, and provide clear text so screen readers understand the page is a 404 error.

What does the notFound() function do in Next.js?

A Throws a server error

B Redirects to the homepage

C Reloads the current page

D Shows the custom 404 page

Calling notFound() triggers the display of the custom 404 page defined in not-found.tsx.

Where should you place the not-found.tsx file in a Next.js app?

A Inside the <code>app</code> directory

B Inside the <code>pages</code> directory

C In the root directory

D Inside the <code>public</code> folder

In Next.js 13+, the not-found.tsx file belongs inside the app directory to customize the 404 page.

Which component type is recommended for not-found.tsx in Next.js 13+?

A Class component

B Pure JavaScript function

C Functional Server Component

D Functional Client Component

Next.js 13+ uses functional Server Components by default for files like not-found.tsx.

What is a good way to make the 404 page accessible?

A Use <code>&lt;div&gt;</code> with no text

B Use semantic tags like <code>&lt;main&gt;</code> and <code>&lt;h1&gt;</code>

C Use only images with no alt text

D Hide the page from screen readers

Semantic HTML helps screen readers understand the page structure and purpose.

Can you add custom CSS or Tailwind classes to not-found.tsx?

A Yes, you can style it like any other component

B No, styling is fixed

C Only inline styles are allowed

D Only global CSS works

You can style not-found.tsx with CSS modules, Tailwind, or any styling method you use in your app.

Explain how to create and customize a not-found.tsx page in Next.js 13+.

Think about where the file goes, how it looks, and how to show it.

Describe accessibility best practices when designing a custom 404 page in Next.js.

Focus on how to make the page understandable and usable for everyone.

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