jsschools

not-found.js

UI rendered when notFound() is called or for unmatched routes.

Since Next 13 (App Router) Spec ↗

Syntax

export default function NotFound() { return <h1>404</h1> }

Returns

ReactNode — The 404 UI for the segment.

Examples

// app/not-found.tsx — global 404
import Link from 'next/link'

export default function NotFound() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <Link href="/">Go home</Link>
    </div>
  )
}

// app/blog/[slug]/not-found.tsx — scoped
export default function NotFound() {
  return <p>That post does not exist.</p>
}

Notes

Triggered by the `notFound()` function or when a URL matches no route. The root `app/not-found.js` also handles unmatched URLs. Returns an HTTP 404 status. Server Component by default; can read data but cannot accept `params` for the catch-all root file.

See also