Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить not-found.tsx у Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)`not-found.tsx` - це **сторінка 404 для конкретного сегмента роутингу** в App Router. Вона спрацьовує, коли Next.js **явно розуміє, що сторінку не знайдено**. **Ключове:** `not-found.tsx` **= "цього ресурсу не існує"**.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`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 ``` ### Пріоритет 1. сегментний `not-found.tsx` 2. глобальний `app/not-found.tsx` 3. дефолтний Next 404 --- ## Як він викликається ### 1. Явно через `notFound()` ```ts 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Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.