当用户访问一个不存在的页面时，服务器会返回 404 状态码，这时候需要返回一个友好的页面告诉用户出现了错误。在 Next.js 中，我们可以自定义 404 页面来提高用户体验。本文将介绍如何在 Next.js 中处理 404 页面，并提供示例代码。
创建自定义 404 页面
在 Next.js 中，我们可以通过创建 pages/404.js 文件来定义自己的 404 页面。该页面会被 Next.js 自动识别并作为默认的 404 页面。
以下是示例代码：
function Custom404() {
return <h1>404 - Page Not Found</h1>
}
export default Custom404在这个示例中，我们创建了一个名为 Custom404 的组件，返回一个 h1 元素并显示 “404 - Page Not Found” 信息。现在，我们可以在浏览器中打开 http://localhost:3000/404 来查看自定义的 404 页面了。
如果需要更复杂一些的自定义 404 页面，可以对页面进行更多的样式和内容修改。
在 getStaticProps 中处理 404 页面
由于 getStaticProps 函数在构建时被调用，在页面的实际响应被触发前，因此我们可以在该函数中处理 404 页面。这样，在页面构建期间，我们可以根据自己的需要动态生成任何内容。
以下是示例代码：
-- -------------------- ---- -------
------ ----- -------- ---------------- ------ -- -
----- ---- - ----- ------------------
-- ------- -
------ -
--------- -----
-
-
------ -
------ - ---- --
-
-在这个示例中，我们根据 params.id 获取文章内容，如果找不到对应的文章，则返回一个包含 notFound: true 属性的对象，表示页面不存在。否则，返回文章信息。
自定义 404 状态码
有时候需要对 404 状态码进行自定义，这时我们可以使用 notFound 属性。该属性是一个布尔类型的值，表示页面是否存在。默认值为 false。我们可以将其设置为 true 来自定义 404 状态码。
以下是示例代码：
-- -------------------- ---- -------
------ ----- -------- -------------------- ---- ------ -- -
----- --- - ----- ---------------------------------------------------
----- ---- - ----- ----------
-- ------- -
------ -
--------- -----
-
-
------ -
------ - ---- --
-
-在这个示例中，我们使用 notFound: true 来自定义 404 状态码。如果文章不存在，则返回一个 404 状态码。
总结
在本文中，我们介绍了在 Next.js 中处理 404 页面的方法。使用自定义 404 页面可以提高用户体验。当然，我们还可以在 getStaticProps 或 getServerSideProps 中动态地生成 404 页面。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6454c002968c7c53b0886c0c