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

Need a 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 */}
    
  );
}

Need a 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 */}
    
  );
}

Need a 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

Need a 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.