Not-found.tsx customization in NextJS

Introduction

The not-found.tsx file lets you show a friendly message when a page is missing. It helps visitors understand they reached a wrong or deleted page.

When a user types a wrong URL on your website.

When a page has been deleted or moved.

To guide users back to the homepage or other pages after a missing page.

To keep your website looking professional even on errors.

Syntax

NextJS

export default function NotFound() {
  return (
    <main>
      <h1>Page Not Found</h1>
      <p>Sorry, we couldn't find what you were looking for.</p>
    </main>
  )
}

This is a React functional component.

Next.js automatically uses this file when a page is not found.

Examples

A simple message with just a heading.

NextJS

export default function NotFound() {
  return <h1>Oops! This page does not exist.</h1>
}

Includes a link to help users navigate back.

NextJS

export default function NotFound() {
  return (
    <main>
      <h1>404 - Page Not Found</h1>
      <p>Try going back to the <a href="/">homepage</a>.</p>
    </main>
  )
}

Adds a button to go back to the previous page, improving user experience.

NextJS

"use client"

export default function NotFound() {
  return (
    <main aria-label="Not Found Page">
      <h1>Sorry, we can't find that page.</h1>
      <button onClick={() => window.history.back()}>Go Back</button>
    </main>
  )
}

Sample Program

This example shows a styled 404 page with a clear message and a link back to the homepage. It uses semantic HTML and accessibility features like aria-label.

NextJS

import Link from 'next/link'

export default function NotFound() {
  return (
    <main role="main" style={{ padding: '2rem', textAlign: 'center' }}>
      <h1 style={{ fontSize: '2.5rem', color: '#cc0000' }}>404 - Page Not Found</h1>
      <p style={{ margin: '1rem 0' }}>
        Sorry, the page you are looking for does not exist.
      </p>
      <Link href="/" style={{ color: '#0070f3', textDecoration: 'underline' }} aria-label="Go to homepage">Go back to homepage</Link>
    </main>
  )
}

Important Notes

Always use semantic HTML tags like <main> and headings for accessibility.

Provide navigation options so users don't get stuck on the error page.

Keep the design consistent with your website style for a smooth experience.

Summary

The not-found.tsx file customizes what users see when a page is missing.

Use clear messages and helpful links or buttons to guide users.

Make sure your error page is accessible and visually consistent.

Practice

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

easy

A. To define the main layout of the website

B. To handle user authentication

C. To customize the page shown when a user visits a missing URL

D. To manage API routes

Solution

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

   This file is specifically for customizing the page shown when a user tries to access a page that does not exist.

2. Step 2: Compare with other options

   Other options like layout, authentication, or API routes are handled by different files or folders in Next.js.

3. Final Answer:

   To customize the page shown when a user visits a missing URL -> Option C

4. Quick Check:

   Missing page display = Custom not-found.tsx [OK]

Hint: Remember: not-found.tsx shows missing page content [OK]

Common Mistakes:

• Confusing not-found.tsx with layout or API files
• Thinking it handles authentication
• Assuming it manages site navigation

2. Which of the following is the correct way to export a default React component in not-found.tsx?

easy

A. default export function NotFound() { return Page Not Found; }

B. function NotFound() { return Page Not Found; } export NotFound;

C. export function NotFound() { return Page Not Found; }

D. export default function NotFound() { return Page Not Found; }

Solution

1. Step 1: Recall correct default export syntax

   In React with Next.js, the correct way is to write export default function ComponentName() { ... }.

2. Step 2: Check each option

   export default function NotFound() { return

   Page Not Found

   ; } matches the correct syntax. function NotFound() { return

   Page Not Found

   ; } export NotFound; has incorrect export syntax. export function NotFound() { return

   Page Not Found

   ; } exports a named function, not default. default export function NotFound() { return

   Page Not Found

   ; } uses invalid syntax.

3. Final Answer:

   export default function NotFound() { return <h1>Page Not Found</h1>; } -> Option D

4. Quick Check:

   Default export = export default function [OK]

Hint: Default export uses 'export default function' syntax [OK]

Common Mistakes:

• Using named export instead of default
• Incorrect export keyword placement
• Missing 'default' keyword

3. Given this not-found.tsx component, what will be displayed when a user visits a missing page?

export default function NotFound() {
  return (
    <main role="main">
      <h1>Oops! Page not found.</h1>
      <p>Try going back or visit the homepage.</p>
      <a href="/">Home</a>
    </main>
  );
}

medium

A. A page with a heading 'Oops! Page not found.', a paragraph, and a link to Home

B. A blank page with no content

C. An error message in the browser console only

D. A redirect to the homepage without showing any message

Solution

1. Step 1: Read the returned JSX

   The component returns a main section with a heading, paragraph, and a link to the homepage.

2. Step 2: Understand what renders on missing page

   When a page is missing, this component renders the content exactly as coded, showing the heading, paragraph, and link.

3. Final Answer:

   A page with a heading 'Oops! Page not found.', a paragraph, and a link to Home -> Option A

4. Quick Check:

   JSX content renders as visible page elements [OK]

Hint: JSX inside return shows on missing page [OK]

Common Mistakes:

• Thinking it redirects automatically
• Assuming no content shows
• Confusing console errors with UI output

4. Identify the error in this not-found.tsx code snippet:

export default function NotFound() {
  return (
    <div>
      <h1>Page Not Found</h1>
      <a href="/">Go Home</a>
    </div>
  )
}

medium

A. Using <div> instead of <main> for accessibility

B. No error; code is valid and works correctly

C. Missing semicolon after return statement

D. Missing parentheses around JSX

Solution

1. Step 1: Check JSX syntax

   The JSX is correctly wrapped and returned; no syntax errors or missing semicolons needed after return.

2. Step 2: Consider accessibility best practices

   Using <main> instead of <div> improves accessibility by defining the main content region.

3. Final Answer:

   Using <div> instead of <main> for accessibility -> Option A

4. Quick Check:

   Use <main> for main content in error pages [OK]

Hint: Use <main> tag for main content, not just <div> [OK]

Common Mistakes:

• Thinking semicolons are required after return
• Ignoring accessibility tags
• Assuming JSX needs extra parentheses

5. You want your not-found.tsx page to show a custom message only if the user is on a mobile device, otherwise show a default message. Which approach fits Next.js best?

hard

A. Create two separate not-found.tsx files, one for mobile and one for desktop

B. Use a React hook like useEffect with window.navigator.userAgent to detect device and conditionally render

C. Use CSS media queries to hide/show different messages in the same component

D. Write server-side code in not-found.tsx to detect device from request headers and render accordingly

Solution

1. Step 1: Understand client vs server rendering

   Device detection using window.navigator.userAgent works only on client side, so use React hooks like useEffect.

2. Step 2: Evaluate other options

   Server-side detection is complex and not typical in not-found.tsx. CSS media queries only style but don't change content. Multiple files for one route is invalid.

3. Final Answer:

   Use a React hook like useEffect with window.navigator.userAgent to detect device and conditionally render -> Option B

4. Quick Check:

   Client detection with hooks = best for device-specific UI [OK]

Hint: Detect device client-side with hooks, not server or multiple files [OK]

Common Mistakes:

• Trying to detect device server-side in this file
• Using multiple not-found.tsx files
• Relying only on CSS for content changes