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.