Not-found page handling in NextJS - Mini Project: Build & Apply

Not-found page handling

📖 Scenario: You are building a website using Next.js. You want to show a friendly message when users visit a page that does not exist.

🎯 Goal: Create a custom not-found.tsx file that displays a simple message for missing pages in your Next.js app.

📋 What You'll Learn

Create a not-found.tsx file inside the app directory

Export a default React functional component named NotFound

The component should return a <main> element with a heading <h1> that says exactly: Page Not Found

Add a paragraph <p> below the heading with the text: Sorry, the page you are looking for does not exist.

Use semantic HTML and ensure the component is accessible

💡 Why This Matters

🌍 Real World

Custom not-found pages improve user experience by showing friendly messages when users visit invalid URLs.

💼 Career

Knowing how to handle 404 pages is essential for web developers working with Next.js or any modern web framework.

1

Create the not-found.tsx file and component

Create a file named not-found.tsx inside the app directory. Inside it, write a React functional component named NotFound that returns a <main> element.

NextJS

// Create the NotFound component inside not-found.tsx
// Your code here

Need a hint?

Start by exporting a default function named NotFound that returns a <main> element.

2

Add a heading with the text 'Page Not Found'

Inside the <main> element of the NotFound component, add an <h1> heading with the exact text Page Not Found.

NextJS

export default function NotFound() {
  return (
    
      {/* Add an h1 heading with text 'Page Not Found' here */}
    
  )
}

Need a hint?

Use an <h1> tag inside <main> with the text Page Not Found.

3

Add a descriptive paragraph below the heading

Below the <h1> heading inside the <main>, add a paragraph <p> with the exact text Sorry, the page you are looking for does not exist..

NextJS

export default function NotFound() {
  return (
    
      Page Not Found
      {/* Add a paragraph with the apology text here */}
    
  )
}

Need a hint?

Add a <p> tag below the heading with the exact apology message.

4

Ensure semantic HTML and accessibility

Make sure the NotFound component uses semantic HTML by having a <main> wrapper, an <h1> heading, and a descriptive <p>. Export the component as default from not-found.tsx.

NextJS

export default function NotFound() {
  return (
    
      Page Not Found
      Sorry, the page you are looking for does not exist.
    
  )
}
// Verify export default and semantic tags

Need a hint?

Check that your component is exported as default and uses semantic HTML tags.