not-found.js

not-found 文件用于在路由段中抛出 notFound 函数时渲染用户界面。除了提供自定义 UI 外，Next.js 会为流式响应返回 200 HTTP 状态码，非流式响应则返回 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 文件导出的 UI。

Props

not-found.js 组件不接受任何 props。

数据获取

默认情况下，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>
  )
}

版本历史

版本	变更内容
`v13.3.0`	根目录 `app/not-found` 开始处理全局未匹配的 URL。
`v13.0.0`	引入 `not-found` 功能。

Props

数据获取

版本历史

On this page