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>
  )
}

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

Свойства

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

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

По умолчанию, not-found является серверным компонентом. Вы можете пометить его как 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>
  )
}

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

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