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.