Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке not-found.tsx в Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)`not-found.tsx` у **Next.js (App Router)** - це **спеціальний файл для обробки 404-сценаріїв**, коли запитаний маршрут або дані не знайдені. **Ключове:** це кастомна сторінка «Не знайдено», прив'язана до конкретного сегмента маршруту.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`not-found.tsx` у **Next.js (App Router)** - це **спеціальний файл для обробки 404-сценаріїв**, коли запитаний маршрут або дані не знайдені. Простіше: > **Це кастомна сторінка «Не знайдено», прив'язана до конкретного сегмента маршруту.** --- ## Навіщо потрібен `not-found.tsx` - показати зрозумілу 404-сторінку - обробити відсутність даних (товар, стаття, користувач) - зробити 404 **локально** (не глобально на весь застосунок) --- ## Як він працює ### 1. Автоматично - при неіснуючому маршруті Якщо URL не відповідає жодному маршруту, Next.js відрендерить найближчий `not-found.tsx` вгору по дереву `app/`. ### 2. Програмно - через `notFound()` Ти можеш **викликати 404 вручну**, наприклад, якщо дані не знайдені: ```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} /> } ``` --- ## Де розміщувати `not-found.tsx` ```txt app/ ├─ not-found.tsx → глобальний 404 └─ blog/ ├─ not-found.tsx → лише для /blog/* └─ [slug]/ └─ page.tsx ``` - **найближчий файл перемагає** - дозволяє робити різні 404 для різних розділів --- ## Що можна робити всередині - будь-який React-компонент - кнопки навігації - кастомний дизайн - SEO-тексти для 404 Це **Server Component** (за замовчанням). --- ## Чим відрізняється від `error.tsx` | `not-found.tsx` | `error.tsx` | |---|---| | 404 - не знайдено | 500 - помилка | | Відсутність ресурсу | Виняток/крах | | `notFound()` | `throw error` | --- ## Важливий момент для SEO - коректний **HTTP 404** - пошуковики розуміють, що сторінки не існує - немає дублювання контенту --- ## Коротка відповідь для співбесіди > `not-found.tsx` **- це спеціальний файл App Router у Next.js для обробки 404-станів. Він дозволяє відображати кастомну сторінку «Не знайдено» як автоматично, так і при виклику** `notFound()` **у коді, на рівні конкретного сегмента маршруту.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.