Find or customise the default 404 page

[foenichs]

Summary

I really like the look of Next.js's default 404 page. For example, here: https://nextjs.org/404

However, it would be great if I could customise the code to use it for other error pages. Where can I find this page's Next.js code?

[ashishmohapatra240]

Customize the 404 Page in App Router

You define a not-found.tsx file inside your /app directory (or inside a route segment) to create a custom 404 page.

app/
├─ not-found.tsx   ← Your global 404 page
├─ layout.tsx
├─ page.tsx

If you want route-specific 404s:

app/blog/
├─ not-found.tsx   ← 404 page only for /blog/*

Sample app/not-found.tsx using Next.js.org 404 Style

'use client'

import Link from 'next/link'

export default function NotFound() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center px-4 text-center bg-white text-gray-900">
      <h1 className="text-6xl font-bold mb-4">404</h1>
      <p className="text-xl mb-6">This page could not be found.</p>
      <Link href="/">
        <a className="text-blue-500 hover:underline">Go back home →</a>
      </Link>
    </div>
  )
}

[icyJoseph]

I think you can still use next/error:

// app/not-found.tsx
'use client';
import Error from 'next/error';

export default function NotFound() {
  return <Error title="Not Found oops" statusCode={404} />;
}

To lightly customize the component, then yeah, you'd use it at app/not-found.tsx or the like.