Not-found.tsx customization in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this custom Not-found.tsx component render?

Consider this Next.js 14 custom not-found.tsx component:

export default function NotFound() {
  return (
    <main role="main" aria-label="Page not found">
      <h1>Oops! Page missing.</h1>
      <p>Sorry, we couldn't find what you were looking for.</p>
    </main>
  )
}

What will be the visible output when a user visits a non-existent page?

NextJS

export default function NotFound() {
  return (
    <main role="main" aria-label="Page not found">
      <h1>Oops! Page missing.</h1>
      <p>Sorry, we couldn't find what you were looking for.</p>
    </main>
  )
}

A A blank page with no content rendered.

B A page with heading 'Oops! Page missing.' and a paragraph apologizing for missing content.

C A default Next.js 404 page ignoring this component.

D An error message saying 'Component NotFound not found'.

💡 Hint

Custom not-found.tsx replaces the default 404 page in Next.js.

This component renders the custom message inside a semantic <main> with proper ARIA label. Next.js uses this component for 404 pages.

📝 Syntax

intermediate

Which option correctly exports a NotFound component in Next.js 14?

Choose the correct syntax to export a NotFound component in not-found.tsx for Next.js 14.

A export NotFound = () => <h1>Not Found</h1>

B function NotFound() { return <h1>Not Found</h1> } export NotFound

C export default function NotFound() { return <h1>Not Found</h1> }

D export default NotFound = () => <h1>Not Found</h1>

💡 Hint

Remember to use export default function syntax for components.

Option C uses valid ES module export syntax with a function declaration. Others have syntax errors.

❓ state_output

advanced

What happens if you use useState inside not-found.tsx?

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

import { useState } from 'react';

export default function NotFound() {
  const [count, setCount] = useState(0);
  return (
    

      
Page Not Found
      
    
  )
}

What will be the behavior when this page is shown?

NextJS

import { useState } from 'react';

export default function NotFound() {
  const [count, setCount] = useState(0);
  return (
    <main>
      <h1>Page Not Found</h1>
      <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
    </main>
  )
}

A The count will always stay 0 because the component is server rendered only.

B The button will increment the count on each click, showing updated count.

C The page will not render at all due to invalid hook usage.

D Next.js will throw a runtime error because useState is not allowed in not-found.tsx.

💡 Hint

Next.js 14 supports client components inside not-found.tsx if you use 'use client'.

By default, components are server components. But if you add 'use client' at the top, hooks like useState work. Without it, this code errors.

🔧 Debug

advanced

Why does this not-found.tsx cause a 500 error?

Review this not-found.tsx code:

export default function NotFound() {
  return (
    <div>
      <h1>Page Not Found</h1>
      <button onClick={() => alert('Oops!')}>Click me</button>
    </div>
  )
}

Visiting a missing page causes a server error 500. Why?

NextJS

export default function NotFound() {
  return (
    <div>
      <h1>Page Not Found</h1>
      <button onClick={() => alert('Oops!')}>Click me</button>
    </div>
  )
}

A Because event handlers like onClick are not allowed in server components without 'use client'.

B Because alert is not defined in Next.js environment.

C Because the component must return a <main> element, not <div>.

D Because the button tag is invalid in Next.js 14.

💡 Hint

Think about client vs server components and event handlers.

By default, components are server components and cannot have event handlers like onClick. Adding 'use client' fixes this.

🧠 Conceptual

expert

How does Next.js 14 decide to render not-found.tsx?

In Next.js 14, when does the framework render the not-found.tsx component?

Choose the most accurate explanation.

A When a route segment or dynamic route returns <code>notFound()</code> from a server component, Next.js renders <code>not-found.tsx</code> for that segment.

B Next.js always renders <code>not-found.tsx</code> on any 404 error regardless of route or data fetching.

C Next.js renders <code>not-found.tsx</code> only if the file is inside the <code>pages</code> directory.

D Next.js renders <code>not-found.tsx</code> only if the user manually navigates to /not-found URL.

💡 Hint

Think about how Next.js 14 handles dynamic routes and server components.

Next.js 14 uses the new App Router. If a server component calls notFound(), the framework renders the nearest not-found.tsx in that route segment.