Suggest an edit

Improve this article

Refine the answer for “What is not-found.tsx in Next.js?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`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:

```ts
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.**

Markdown · drag & drop images · ⌘B / ⌘I shortcuts316 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.