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

在 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 页面

4. 总结

• 全局触发 的 404 页面适用于整个应用，当用户访问不存在的路由时自动显示。
• 局部触发 的 404 页面适用于特定页面或条件，通过手动调用 notFound() 函数来触发。

根据你的需求，你可以选择使用全局触发、局部触发，或者两者结合的方式来处理 404 页面。