Not-found.tsx customization in NextJS - Step-by-Step Execution

Concept Flow - not-found.tsx customization

User requests a page URL

↓

Next.js checks if page exists

No↓

Render not-found.tsx component

↓

Display custom 404 message and UI

↓

User sees friendly error page

When a user visits a page that does not exist, Next.js renders the not-found.tsx component to show a custom 404 error page.

Execution Sample

NextJS

export default function NotFound() {
  return (
    <main>
      <h1>Page Not Found</h1>
      <p>Sorry, we couldn't find that page.</p>
    </main>
  )
}

This code defines a simple custom 404 page that shows a heading and a message when a page is not found.

Execution Table

Step	Action	Condition	Result	Rendered Output
1	User requests '/unknown-page'	Page exists?	No	Trigger NotFound component render
2	Next.js loads NotFound component	Component loaded?	Yes	Prepare JSX for rendering
3	Render JSX	Return JSX from NotFound()	JSX returned	<main><h1>Page Not Found</h1><p>Sorry, we couldn't find that page.</p></main>
4	Browser displays page	Page rendered?	Yes	User sees custom 404 message
5	End	No further action	Stop	User stays on 404 page

💡 User requested a non-existent page, so Next.js renders the NotFound component and stops.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
requestedPage	'/unknown-page'	'/unknown-page'	'/unknown-page'	'/unknown-page'
pageExists	unknown	false	false	false
NotFoundComponent	undefined	loaded	rendered JSX	rendered JSX

Key Moments - 3 Insights

Why does Next.js render not-found.tsx instead of a blank page?

Because the requested page does not exist (see execution_table step 1), Next.js automatically renders the NotFound component to show a friendly error message.

Can I customize the message shown on the 404 page?

Yes, the NotFound component returns JSX (step 3) that you can edit to change the heading, text, or add images and links.

What happens if not-found.tsx is missing?

Next.js will show its default 404 page. Providing not-found.tsx overrides this with your custom content (see variable_tracker NotFoundComponent).

Visual Quiz - 3 Questions

Look at the execution_table, what is the rendered output at step 3?

A <h1>Welcome</h1>

B <div>Loading...</div>

C <main><h1>Page Not Found</h1><p>Sorry, we couldn't find that page.</p></main>

D Blank page

💡 Hint

Check the 'Rendered Output' column in execution_table row 3.

At which step does Next.js decide the page does not exist?

A Step 1

B Step 4

C Step 2

D Step 3

💡 Hint

Look at the 'Condition' column in execution_table row 1.

If you change the message inside NotFound.tsx, which variable in variable_tracker changes?

A requestedPage

B NotFoundComponent

C pageExists

D None

💡 Hint

See variable_tracker row for NotFoundComponent and how it holds the rendered JSX.

Concept Snapshot

not-found.tsx customization in Next.js:
- Create not-found.tsx in app directory
- Export a React function returning JSX
- Next.js renders this on 404 errors
- Customize message and layout freely
- Provides friendly user feedback on missing pages

Full Transcript

When a user requests a page that does not exist in a Next.js app, the framework automatically renders the not-found.tsx component if it exists. This component is a React function that returns JSX to display a custom 404 error page. The flow starts with the user request, Next.js checks if the page exists, and if not, it loads and renders the NotFound component. The user then sees the custom message defined in this component. You can customize the heading, text, and layout inside not-found.tsx to provide a friendly and helpful error page. If not-found.tsx is missing, Next.js shows its default 404 page. This visual execution trace shows each step from request to rendering and the state of key variables during the process.

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