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

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

Пропсы

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

Загрузка данных

По умолчанию 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>
  )
}

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

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

Пропсы

Загрузка данных

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

On this page