not-found.js

Файл not-found используется для отображения интерфейса, когда в сегменте маршрута вызывается функция notFound. Помимо отображения пользовательского интерфейса, 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>
  )
}

Справочник

Пропсы

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

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

Примеры

Получение данных

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

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

export default async function NotFound() {
  const headersList = await 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 = await 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`.

Справочник

Пропсы

Примеры

Получение данных

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

On this page