Not-found.tsx customization in NextJS - Mini Project: Build & Apply

Customize the Not-found.tsx Page in Next.js

📖 Scenario: You are building a website using Next.js. When users visit a page that does not exist, Next.js shows a default 'Not Found' page. You want to make this page friendlier and more helpful by customizing it.

🎯 Goal: Create a custom not-found.tsx page in Next.js that shows a friendly message, a button to go back home, and uses semantic HTML with accessible attributes.

📋 What You'll Learn

Create a not-found.tsx file with a React functional component named NotFound.

Use semantic HTML elements: <main>, <h1>, <p>, and <button>.

Add an accessible aria-label to the button for screen readers.

Use Next.js useRouter hook to navigate back to the home page when the button is clicked.

Make sure the page is responsive and visually clear.

💡 Why This Matters

🌍 Real World

Customizing the 404 or not-found page improves user experience by providing helpful navigation and clear messaging when users reach a missing page.

💼 Career

Web developers often need to customize error pages in Next.js projects to match branding and improve accessibility and usability.

1

Create the basic NotFound component

Create a file named not-found.tsx and write a React functional component called NotFound that returns a <main> element containing an <h1> with the text "Page Not Found".

NextJS

// Your code here
// Create NotFound component with main and h1 elements

Hint

Start by creating a React function named NotFound that returns a <main> with an <h1> inside.

2

Add a descriptive paragraph below the heading

Inside the NotFound component, add a <p> element below the <h1> with the text "Sorry, the page you are looking for does not exist.".

NextJS

import React from 'react';

export default function NotFound() {
  return (
    
      Page Not Found
      {/* Add a paragraph below the heading */}
    
  );
}

Hint

Add a paragraph tag with the exact text below the heading inside the main element.

3

Add a button to navigate back home with aria-label

Import useRouter from next/navigation. Inside the NotFound component, create a router variable by calling useRouter(). Add a <button> below the paragraph with the text "Go Home" and an aria-label of "Go back to homepage". When clicked, the button should call router.push('/') to navigate to the home page.

NextJS

import React from 'react';
// Import useRouter from next/navigation

export default function NotFound() {
  // Create router variable using useRouter

  return (
    
      Page Not Found
      Sorry, the page you are looking for does not exist.
      {/* Add a button with aria-label and onClick to go home */}
    
  );
}

Hint

Use useRouter to get the router object. Add a button with the exact aria-label and onClick handler to navigate home.

4

Add simple responsive styling with semantic HTML

Wrap the <main> content inside a <section> with a class name container. Add a <style jsx> block below the component that styles the .container class with max-width of 40rem, margin auto for horizontal centering, padding of 1rem, and text-align center. Also style the button with padding 0.5rem 1rem, font-size 1rem, and cursor pointer. This will make the page look neat and centered on all screen sizes.

NextJS

import React from 'react';
import { useRouter } from 'next/navigation';

export default function NotFound() {
  const router = useRouter();

  return (
    // Wrap main content in a section with class container
    
      Page Not Found
      Sorry, the page you are looking for does not exist.
       router.push('/')}>Go Home
    
  );
}

// Add style jsx block below

Hint

Wrap the main content in a section with class container. Add a <style jsx> block with the exact styles for container and button as described.

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