Not-found page handling in NextJS - Step-by-Step Execution

Concept Flow - Not-found page handling

User requests URL

↓

Next.js checks routes

↓

Route found

↓

Render page

↓

Show 404 page

↓

User sees error message

When a user visits a URL, Next.js checks if the route exists. If not, it shows the custom 404 page from not-found.js.

Execution Sample

NextJS

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

This code defines a simple custom 404 page that Next.js shows when a page is not found.

Execution Table

Step	Action	Route Exists?	Component Rendered	User Sees
1	User requests /about	Yes	About page component	About page content
2	User requests /random-page	No	NotFound component	404 - Page Not Found
3	User requests /contact	Yes	Contact page component	Contact page content
4	User requests /nonexistent	No	NotFound component	404 - Page Not Found

💡 Execution stops after rendering the appropriate page or the 404 page if route not found.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
requestedRoute	undefined	/about	/random-page	/contact	/nonexistent
routeExists	undefined	true	false	true	false
renderedComponent	undefined	About	NotFound	Contact	NotFound

Key Moments - 2 Insights

Why does Next.js show the NotFound component when the route does not exist?

Because Next.js checks if the requested route exists (see execution_table rows 2 and 4). If it doesn't, it renders the NotFound component to show a 404 page.

Can you customize the 404 page in Next.js?

Yes, by creating a not-found.js file exporting a React component, Next.js uses it automatically for missing routes (see execution_sample).

Visual Quiz - 3 Questions

Look at the execution_table, what component is rendered when the user requests '/random-page'?

A NotFound component

B About page component

C Contact page component

D Home page component

💡 Hint

Check the row where requestedRoute is '/random-page' in execution_table.

At which step does the routeExists variable become false?

A After Step 3

B After Step 1

C After Step 2

D After Step 4

💡 Hint

Look at variable_tracker for routeExists values after each step.

If you add a new page for '/blog', what changes in the execution_table when requesting '/blog'?

A routeExists will be false and NotFound component renders

B routeExists will be true and the Blog page component renders

C No change, NotFound component always renders

D Execution will stop immediately

💡 Hint

Think about how Next.js checks routes and renders components based on routeExists.

Concept Snapshot

Next.js shows a 404 page when a route is not found.
Create a not-found.js file exporting a React component.
Next.js automatically renders this for missing routes.
User sees a friendly 'Page Not Found' message.
This improves user experience on bad URLs.

Full Transcript

When a user visits a URL in a Next.js app, the framework checks if the route exists. If it does, Next.js renders the matching page component. If the route does not exist, Next.js renders the custom 404 page defined in not-found.js. This page usually shows a message like '404 - Page Not Found' to inform the user. The code example shows a simple React component for the 404 page. The execution table traces requests to different URLs, showing which component renders and what the user sees. Variables track the requested route, whether it exists, and which component is rendered. Key moments clarify why Next.js renders the NotFound component for missing routes and how to customize the 404 page. The visual quiz tests understanding of which component renders for given routes and how adding pages affects route existence. This helps beginners see how Next.js handles not-found pages step-by-step.