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.