Що таке not-found.tsx в Next.js?

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

not-found.tsx у Next.js (App Router) - це спеціальний файл для обробки 404-сценаріїв, коли запитаний маршрут або дані не знайдені.

Простіше:

Це кастомна сторінка «Не знайдено», прив'язана до конкретного сегмента маршруту.

Навіщо потрібен `not-found.tsx`

показати зрозумілу 404-сторінку
обробити відсутність даних (товар, стаття, користувач)
зробити 404 локально (не глобально на весь застосунок)

Як він працює

1. Автоматично - при неіснуючому маршруті

Якщо URL не відповідає жодному маршруту, Next.js відрендерить найближчий not-found.tsx вгору по дереву app/.

2. Програмно - через `notFound()`

Ти можеш викликати 404 вручну, наприклад, якщо дані не знайдені:

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() у коді, на рівні конкретного сегмента маршруту.

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

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

Premium

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