Not-found page handling in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of a not-found page in Next.js?

A not-found page shows a friendly message when a user tries to visit a page that does not exist. It helps users understand they reached a wrong or missing page.

beginner

How do you create a custom 404 page in Next.js?

Create a file named app/not-found.tsx or pages/404.tsx with a React component that returns the UI you want to show when a page is not found.

intermediate

What React hook can you use inside app/not-found.tsx to navigate back to a valid page?

You can use the useRouter hook from next/navigation to programmatically navigate users back to a valid page, like the homepage.

beginner

What happens if you do not create a custom 404 page in Next.js?

Next.js will show a default 404 page with a simple message. It works but is not styled or customized for your app's look and feel.

advanced

How can you trigger the not-found page programmatically in Next.js server components?

You can call the notFound() function from next/navigation inside a server component or server action to show the not-found page when data is missing.

Where do you place a custom 404 page in a Next.js app router project?

A In the <code>app/not-found.tsx</code> file

B In the <code>pages/404.tsx</code> file

C In the <code>public/404.html</code> file

D In the <code>components/NotFound.tsx</code> file

In Next.js app router, the custom not-found page goes in app/not-found.tsx.

What function do you import to programmatically show the not-found page in Next.js server components?

A <code>notFound()</code>

B <code>useRouter()</code>

C <code>redirect()</code>

D <code>useNotFound()</code>

The notFound() function from next/navigation triggers the not-found page.

What is the default behavior if no custom 404 page is created in Next.js?

A The app crashes

B A default Next.js 404 page shows

C A blank page shows

D The homepage loads instead

Next.js shows a default 404 page if no custom one is provided.

Which hook helps navigate users back from a not-found page in Next.js client components?

A <code>useState()</code>

B <code>useEffect()</code>

C <code>useRouter()</code>

D <code>useNotFound()</code>

useRouter() from next/navigation allows navigation control.

In Next.js, what file name is used for a custom 404 page in the pages directory (not app router)?

A error.tsx

B not-found.js

C 404.js

D 404.tsx

In the pages directory, the custom 404 page is named 404.tsx.

Explain how to create and use a custom not-found page in a Next.js app router project.

Think about file location, component, and navigation helpers.

Describe what happens when a user visits a missing page in Next.js without a custom 404 page.

Focus on default behavior and user experience.