not-found.js

Файл not-found используется для отображения пользовательского интерфейса при вызове функции notFound внутри сегмента маршрута. Помимо отображения кастомного UI, Next.js вернет HTTP-статус 200 для потоковых ответов и 404 для непотоковых.

import Link from 'next/link'

export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

import Link from 'next/link'

export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

Полезно знать: Помимо обработки ожидаемых ошибок notFound(), корневой файл app/not-found.js также обрабатывает любые URL, не соответствующие маршрутам вашего приложения. Это означает, что пользователи, посетившие URL, который не обрабатывается вашим приложением, увидят интерфейс, экспортированный файлом app/not-found.js.

Пропсы (Props)

Компоненты not-found.js не принимают пропсов.

Получение данных (Data Fetching)

По умолчанию not-found является серверным компонентом (Server Component). Вы можете пометить его как async для получения и отображения данных:

import Link from 'next/link'
import { headers } from 'next/headers'

export default async function NotFound() {
  const headersList = headers()
  const domain = headersList.get('host')
  const data = await getSiteData(domain)
  return (
    <div>
      <h2>Not Found: {data.name}</h2>
      <p>Could not find requested resource</p>
      <p>
        View <Link href="/blog">all posts</Link>
      </p>
    </div>
  )
}

import Link from 'next/link'
import { headers } from 'next/headers'

export default async function NotFound() {
  const headersList = headers()
  const domain = headersList.get('host')
  const data = await getSiteData(domain)
  return (
    <div>
      <h2>Not Found: {data.name}</h2>
      <p>Could not find requested resource</p>
      <p>
        View <Link href="/blog">all posts</Link>
      </p>
    </div>
  )
}

Если вам нужно использовать клиентские хуки, такие как usePathname, для отображения контента на основе пути, вам следует получать данные на стороне клиента.

История версий

Версия	Изменения
`v13.3.0`	Корневой `app/not-found` обрабатывает глобальные URL, не соответствующие маршрутам.
`v13.0.0`	Добавлен `not-found`.

Пропсы (Props)

Получение данных (Data Fetching)

История версий

On this page