Next.js中not-found.js触发方式详解

最新推荐文章于 2025-06-21 13:07:58 发布

小灰灰学编程

最新推荐文章于 2025-06-21 13:07:58 发布

阅读量513

点赞数 4

CC 4.0 BY-SA版权

分类专栏： next.js 文章标签： Next.js 前端

本文链接：https://blog.csdn.net/chen_ac/article/details/146459767

next.js 专栏收录该内容

4 篇文章

订阅专栏

在 Next.js 中，not-found.js 文件用于定义 404 页面。Next.js 提供了全局和局部两种触发 404 页面的方式。以下是它们的详细讲解和区别：

1. 全局触发 404 页面

定义全局 404 页面

在 Next.js 项目中，你可以在 app 目录下创建一个名为 not-found.js 的文件来定义全局的 404 页面。这个页面会在用户访问不存在的路由时自动显示。

文件路径：

app/not-found.js

示例代码：

export default function NotFound() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>The page you are looking for does not exist.</p>
    </div>
  );
}

触发方式

全局 404 页面会在以下情况下自动触发：

用户访问的路由在 app 目录下没有对应的页面文件。
用户访问的路由在 pages 目录下没有对应的页面文件（如果你同时使用了 app 和 pages 目录）。

2. 局部触发 404 页面

定义局部 404 页面

局部 404 页面是指在特定的路由或页面中手动触发 404 页面。你可以在任何页面或组件中通过调用 notFound() 函数来触发 404 页面。

示例代码：

import { notFound } from 'next/navigation';

export default function Page({ params }) {
  const { id } = params;

  if (id === 'invalid-id') {
    notFound();
  }

  return (
    <div>
      <h1>Page Content</h1>
      <p>This is a valid page.</p>
    </div>
  );
}

触发方式

局部 404 页面会在以下情况下触发：

你在页面或组件中手动调用了 notFound() 函数。

3. 全局触发和局部触发的区别

特性	全局触发 404 页面	局部触发 404 页面
触发条件	自动触发，当访问的路由不存在时	手动触发，通过调用 `notFound()` 函数
定义位置	`app/not-found.js`	任何页面或组件中
适用场景	适用于整个应用的 404 页面	适用于特定页面或条件下的 404 页面
灵活性	较低，适用于通用的 404 页面	较高，可以根据特定条件自定义 404 页面