Next.js 是一个流行的 React 框架，让开发人员可以使用 React 构建服务器端渲染网站。在构建网站时，其中一个常见的问题是如何处理 404 页面。
在本文中，我们将介绍如何在 Next.js 中实现 404 页面，并提供示例代码，帮助你更好地理解这个过程。
什么是 404 页面？
通常，当用户试图访问一个不存在的页面时，浏览器会显示一个 404 错误页面，表示该页面不存在。网站的 404 页面是让用户知道这个问题的一种方式，同时还可以提供其他有用的信息，如搜索框或相关链接。
在 Next.js 中，我们可以使用 404.js 文件来自定义 404 页面。
实现 404 页面的步骤
以下是在 Next.js 中实现 404 页面的基本步骤：
1. 创建 404.js 文件
首先，我们需要在项目中创建一个名为 404.js 的文件。这个文件将是我们的自定义 404 页面。
2. 编写 404.js 文件
在 404.js 文件中，我们需要编写如下代码：
-- -------------------- ---- -------
----- ------------ - -- -- -
------ -
-----
------- - ---- --- ----------
------ ---- --- --- ------- --- ----- --- -- ----------
------
--
--
------ ------- -------------这个代码创建了一个简单的 React 组件，该组件显示一个 404 错误消息。
3. 在 pages 目录下增加 404 页面路由
在 Next.js 中，我们通过在 pages 目录下的文件来映射 URL。我们需要在 pages 目录下的一个名为 404.js 的文件中添加以下代码：
export { default } from './404';这个代码将指示 Next.js 使用 404.js 文件作为 404 页面。
4. 实现我们的 getInitialProps 函数
现在我们需要为 our 404 页面实现 getInitialProps 函数。该函数允许我们请求后端数据或进行一些服务器端渲染的任务。
为了制作我们的 404 页面，我们需要在 404.js 文件中添加以下代码：
PageNotFound.getInitialProps = async function({ res, err }) {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
return { statusCode };
}这个代码将返回一个对象，其中 statusCode 属性指定 HTTP 响应的状态代码。在我们的情况下，它应该是 404。
5. 验证是否正确工作
最后，我们需要验证我们的 404 页面是否正确地工作。我们可以通过在浏览器中输入一个错误的 URL 来验证它是否正确显示，例如 localhost:3000/404-or-whatever.
如果一切正常，我们应该能够看到自定义 404 错误页面。
结论
通过这篇文章，你应该能够学会如何在 Next.js 中实现自定义的 404 页面。这样做可以让你的网站更美观和用户友好。提供示例代码和详细的说明可以帮助你更好地理解这个过程，让你能够在你的自己的网站中使用这个代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67399290317fbffedf177a7e