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.

Practice

1. What is the purpose of a not-found.tsx file in a Next.js app directory?

easy

A. To display a custom message when a user visits a page that does not exist.

B. To define the main homepage of the website.

C. To handle user authentication and login.

D. To store global CSS styles for the app.

Solution

1. Step 1: Understand the role of not-found.tsx

   The not-found.tsx file is used to show a special page when a user tries to visit a URL that does not match any existing page.

2. Step 2: Compare with other options

   The other options describe unrelated features: defining the main homepage, handling user authentication and login, and storing global CSS styles, which are not handled by not-found.tsx.

3. Final Answer:

   To display a custom message when a user visits a page that does not exist. -> Option A

4. Quick Check:

   Not-found page = Custom message for missing pages [OK]

Hint: Not-found page shows when URL has no matching page [OK]

Common Mistakes:

• Confusing not-found.tsx with homepage or layout files
• Thinking it handles authentication
• Assuming it manages styles

2. Which of the following is the correct location for the not-found.tsx file in a Next.js 14 app using the App Router?

easy

A. Inside the pages directory

B. Inside the components directory

C. Inside the app directory

D. Inside the public directory

Solution

1. Step 1: Recall Next.js 14 App Router structure

   In Next.js 14 with the App Router, special files like not-found.tsx belong inside the app directory to define routes and error pages.

2. Step 2: Eliminate incorrect directories

   The pages directory is for the Pages Router, public is for static assets, and components is for reusable UI parts, not special route files.

3. Final Answer:

   Inside the app directory -> Option C

4. Quick Check:

   App Router special files go in app directory [OK]

Hint: App Router files like not-found.tsx go in app folder [OK]

Common Mistakes:

• Placing not-found.tsx in pages directory (old router)
• Putting it in public or components folders
• Confusing app and pages directories

3. Given this not-found.tsx component in Next.js:

export default function NotFound() {
  return (
    <main>
      <h1>Page Not Found</h1>
      <p>Sorry, we couldn't find that page.</p>
    </main>
  )
}

What will a user see if they visit a non-existent page?

medium

A. A blank page with no content

B. The message: 'Page Not Found' and 'Sorry, we couldn't find that page.'

C. An error message from the server

D. The homepage content

Solution

1. Step 1: Read the JSX returned by NotFound component

   The component returns a main section with a heading 'Page Not Found' and a paragraph apologizing for missing page.

2. Step 2: Understand Next.js behavior on missing pages

   When a user visits a page that does not exist, Next.js renders this not-found.tsx component, showing the messages inside.

3. Final Answer:

   The message: 'Page Not Found' and 'Sorry, we couldn't find that page.' -> Option B

4. Quick Check:

   NotFound component content = shown on missing pages [OK]

Hint: NotFound component content displays on missing pages [OK]

Common Mistakes:

• Expecting server error instead of custom message
• Thinking homepage shows instead
• Assuming blank page appears

4. You wrote a not-found.tsx file but Next.js still shows the default 404 page. What is the most likely mistake?

medium

A. The not-found.tsx file has a syntax error in the JSX.

B. You named the file NotFound.tsx with uppercase letters.

C. You forgot to restart the Next.js development server.

D. The not-found.tsx file is placed inside the components folder instead of app.

Solution

1. Step 1: Check file placement rules for not-found.tsx

   The not-found.tsx file must be inside the app directory to be recognized by Next.js as the custom 404 page.

2. Step 2: Analyze other options

   Syntax errors cause build failures, restarting server is good but not required for recognition, and filename is case sensitive but must be exactly not-found.tsx (lowercase). Placing it in components means Next.js ignores it.

3. Final Answer:

   The not-found.tsx file is placed inside the components folder instead of app. -> Option D

4. Quick Check:

   File location matters for Next.js to detect not-found page [OK]

Hint: Put not-found.tsx inside app folder, not components [OK]

Common Mistakes:

• Placing not-found.tsx outside app directory
• Ignoring case sensitivity of filename
• Assuming server restart fixes detection

5. You want to create a helpful not-found page in Next.js that includes a link back to the homepage. Which code snippet correctly implements this inside not-found.tsx?

hard

A. export default function NotFound() {
return (

Page Not Found
Sorry, we couldn't find that page.
Go back home

)
}

B. export default function NotFound() {
return (

Page Not Found
Sorry, we couldn't find that page.
Go back home

)
}

C. export default function NotFound() {
return (

Page Not Found
Sorry, we couldn't find that page.
Go back home

)
}

D. export default function NotFound() {
return (

Page Not Found
Sorry, we couldn't find that page.
Go back home

)
}

Solution

1. Step 1: Identify correct link usage in Next.js not-found page

   In Next.js, the not-found.tsx page can use a normal <a> tag with href to link back to the homepage. The Link component requires import and is used differently.

2. Step 2: Check each option's link syntax

   The snippet with <a href="/"> is valid JSX/HTML and requires no imports. Snippets with <Link href="/"> reference undefined Link (missing import { Link } from 'next/link';). Snippets with to="/" use invalid attribute ('to' is for React Router; use href).

3. Final Answer:

   Using <a href="/">Go back home</a> -> Option A

4. Quick Check:

   Use <a href="/"> for links in not-found.tsx [OK]

Hint: Use for homepage link in not-found.tsx [OK]

Common Mistakes:

• Using <Link> without import or proper usage
• Using 'to' attribute instead of 'href'
• Forgetting to provide a link back to home