What is not-found.tsx in Next.js?

Next.jsMiddle~1 min read

not-found.tsx in Next.js (App Router) is a special file for handling 404 scenarios, when the requested route or data isn't found.

Put simply:

It's a custom "Not found" page tied to a specific route segment.

Why `not-found.tsx` is needed

show a clear 404 page
handle missing data (product, article, user)
make 404 handling local (not global to the whole application)

How it works

1. Automatically - for a nonexistent route

If the URL doesn't match any route, Next.js renders the nearest not-found.tsx up the app/ tree.

2. Programmatically - via `notFound()`

You can trigger a 404 manually, for example, if data isn't found:

import { notFound } from 'next/navigation'

export default async function Page({ params }) {
  const post = await getPost(params.slug)
  if (!post) notFound()

  return <Article post={post} />
}

Where to place `not-found.tsx`

txt

app/
 ├─ not-found.tsx          → global 404
 └─ blog/
    ├─ not-found.tsx       → only for /blog/*
    └─ [slug]/
       └─ page.tsx

the nearest file wins
lets you have different 404 pages for different sections

What you can do inside it

any React component
navigation buttons
custom design
SEO text for the 404 page

It's a Server Component (by default).

How it differs from `error.tsx`

`not-found.tsx`	`error.tsx`
404 - not found	500 - error
Missing resource	Exception/crash
`notFound()`	`throw error`

Important point for SEO

a correct HTTP 404
search engines understand the page doesn't exist
no duplicate content

Short interview answer

not-found.tsx is a special App Router file in Next.js for handling 404 states. It lets you display a custom "Not found" page either automatically or by calling notFound() in code, at the level of a specific route segment.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.