Not-found page handling in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a Next.js page returns notFound()?

Consider a Next.js 14 app router page that returns notFound() from its server component. What is the user experience?

NextJS

import { notFound } from 'next/navigation';

export default function Page() {
  const data = null;
  if (!data) {
    notFound();
  }
  return <div>Data found</div>;
}

A The page redirects to the home page automatically.

B The page renders an empty div with no content.

C The user sees the default 404 page provided by Next.js.

D The app crashes with a runtime error.

💡 Hint

Think about what notFound() is designed to do in Next.js routing.

Calling notFound() in a server component tells Next.js to show the built-in 404 page. It does not crash or redirect.

📝 Syntax

intermediate

Which code correctly triggers a 404 page in Next.js app router?

Choose the code snippet that correctly triggers the 404 page using notFound() in a server component.

A

import { notFound } from 'next/navigation';

export default function Page() {
  if (true) {
    notFound();
  }
  return <div>Content</div>;
}

B

import { notFound } from 'next/navigation';

export default function Page() {
  notFound();
  return <div>Will not render</div>;
}

C

import { notFound } from 'next/navigation';

export default function Page() {
  if (true) {
    return notFound();
  }
  return <div>Content</div>;
}

D

import { notFound } from 'next/navigation';

export default function Page() {
  return notFound();
}

💡 Hint

Remember that notFound() throws internally and does not return JSX.

Option A calls notFound() conditionally and does not return it. This is the correct usage. Options A, C, and D misuse return or call order. Option A tries to return notFound() which is invalid.

🔧 Debug

advanced

Why does this Next.js page not show the 404 page as expected?

Given this code, the 404 page does not appear when data is null. What is the problem?

NextJS

import { notFound } from 'next/navigation';

export default function Page() {
  const data = null;
  if (!data) {
    return notFound();
  }
  return <div>{data.title}</div>;
}

A The component must be a client component to use <code>notFound()</code>.

B Returning <code>notFound()</code> is incorrect; it should be called without return.

C The import statement for <code>notFound</code> is missing curly braces.

D The <code>data</code> variable should be fetched asynchronously.

💡 Hint

Check how notFound() is supposed to be used in server components.

notFound() throws internally to stop rendering and show the 404 page. Returning it as JSX is incorrect and causes the 404 not to appear.

❓ state_output

advanced

What is the rendered output when notFound() is called inside a client component?

Consider this client component that calls notFound(). What happens?

NextJS

"use client";
import { notFound } from 'next/navigation';

export default function ClientPage() {
  notFound();
  return <div>Should not render</div>;
}

A The component renders the div content normally.

B The 404 page is shown as expected.

C The page redirects to the home page.

D The app crashes with a runtime error because <code>notFound()</code> is server-only.

💡 Hint

Think about where notFound() can be used in Next.js.

notFound() is a server-only function and cannot be called inside client components. Calling it there causes a runtime error.

🧠 Conceptual

expert

How does Next.js handle nested layouts when notFound() is called in a deeply nested page?

In a Next.js app router, if a deeply nested page calls notFound(), what is the effect on the layout and UI?

A Next.js replaces the entire page including all layouts with the 404 page.

B Only the nested page content is replaced by the 404 page; layouts remain visible.

C Next.js throws an error and does not render anything.

D The 404 page is shown inside the deepest layout only, leaving outer layouts intact.

💡 Hint

Consider how Next.js treats 404 pages in the app router with nested layouts.

When notFound() is called, Next.js replaces the entire route segment including all nested layouts with the 404 page, so the user sees a full 404 page without any parent layouts.