not-found.js

not-found 文件用于在路由段内抛出 notFound 函数时渲染 UI。除了提供自定义 UI 外，Next.js 还会为流式响应返回 200 HTTP 状态码，为非流式响应返回 404 状态码。

app/not-found.tsx

import Link from "next/link";
 
export default function NotFound() {
  return (
    <div>
      <h2>未找到</h2>
      <p>无法找到请求的资源</p>
      <Link href="/">返回首页</Link>
    </div>
  );
}

app/blog/not-found.js

import Link from "next/link";
 
export default function NotFound() {
  return (
    <div>
      <h2>未找到</h2>
      <p>无法找到请求的资源</p>
      <Link href="/">返回首页</Link>
    </div>
  );
}

提示：除了捕获预期的 notFound() 错误外，根目录的 app/not-found.js 文件还会处理整个应用中任何不匹配的 URL。这意味着当用户访问应用中未处理的 URL 时，将显示 app/not-found.js 文件导出的 UI。

属性

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

数据获取

默认情况下，not-found 是一个服务器组件。你可以将其标记为 async 以获取和显示数据：

app/not-found.tsx

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>未找到：{data.name}</h2>
      <p>无法找到请求的资源</p>
      <p>
        查看 <Link href="/blog">所有文章</Link>
      </p>
    </div>
  );
}

app/not-found.jsx

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>未找到：{data.name}</h2>
      <p>无法找到请求的资源</p>
      <p>
        查看 <Link href="/blog">所有文章</Link>
      </p>
    </div>
  );
}

如果你需要使用客户端组件 hook（如 usePathname）来根据路径显示内容，则必须在客户端进行数据获取。

版本历史

版本	变更
`v13.3.0`	根目录 `app/not-found` 处理全局不匹配 URL
`v13.0.0`	引入 `not-found`