常见的建站工具爱站网长尾关键词挖掘工具
在 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 页面。