Що робить not-found.tsx у Next.js?

Next.jsMiddle~1 хв читання

not-found.tsx - це сторінка 404 для конкретного сегмента роутингу в App Router. Вона спрацьовує, коли Next.js явно розуміє, що сторінку не знайдено.

Простіше:

not-found.tsx = "цього ресурсу не існує"

Що таке `not-found.tsx`

У Next.js файл not-found.tsx:

відображається при 404-сценарії
може бути глобальним або сегментним
НЕ є error boundary
використовується для очікуваних ситуацій "не знайдено"

Де може лежати

txt

app/
 ├─ not-found.tsx        # глобальний 404
 ├─ blog/
 │   └─ not-found.tsx   # тільки для /blog/*
 └─ page.tsx

Пріоритет

сегментний not-found.tsx
глобальний app/not-found.tsx
дефолтний Next 404

Як він викликається

1. Явно через `notFound()`

import { notFound } from "next/navigation";

export default async function Page({ params }) {
  const post = await getPost(params.id);

  if (!post) {
    notFound(); // ← сюди
  }

  return <Post post={post} />;
}

Це основний і правильний спосіб

2. Невалідний динамічний маршрут

txt

app/users/[id]/page.tsx

Якщо:

/users/999
користувача немає
ти викликав notFound()

→ відрендериться not-found.tsx

Коли НЕ спрацьовує

runtime error
exception
throw new Error

Для цього:

error.tsx
global-error.tsx

`not-found.tsx` vs `error.tsx`

	not-found.tsx	error.tsx
Тип	очікуваний сценарій	помилка
HTTP статус	404	500
Потрібен `use client`	ні	так
Є `reset()`	ні	так
Для бізнес-логіки	так	ні

Мінімальний приклад

tsx

export default function NotFound() {
  return (
    <div>
      <h1>404</h1>
      <p>Сторінку не знайдено</p>
    </div>
  );
}

Server Component, без use client.

Важливі нюанси

SEO

повертає HTTP 404
пошукові системи все розуміють правильно

Layout'и

not-found.tsx рендериться всередині layout
global-error.tsx - ні

Metadata

можна задати metadata для 404
корисно для SEO і UX

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.