Next.js 是一个 React 框架，它提供了一个灵活的路由系统和服务器渲染功能。在构建 Next.js 应用时，有时候我们需要自定义错误页面和 404 页面，以提高用户体验和网站的可访问性。本文将介绍如何在 Next.js 中自定义错误页面和 404 页面。
自定义错误页面
默认情况下，Next.js 会在发生错误时显示一个默认的错误页面。但是，我们可以通过创建一个 _error.js 文件来自定义错误页面。
在项目的根目录下创建一个 _error.js 文件，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- --------- ------- --------------- -
------ ----------------- ---- --- -- -
----- ---------- - --- - -------------- - --- - -------------- - -----
------ - ---------- --
-
-------- -
------ -
-----
--------------------------- ----------
--------- --------- ---- ----------
------
--
-
-
------ ------- ----------在这个文件中，我们定义了一个 ErrorPage 组件，它会在发生错误时显示。getInitialProps 方法是 Next.js 的一个特殊方法，它会在服务器端渲染时调用，用于获取错误状态码。如果是在客户端渲染时发生的错误，getInitialProps 方法不会被调用。
我们可以在 render 方法中根据错误状态码来显示不同的错误信息。
自定义 404 页面
类似地，Next.js 也提供了一个默认的 404 页面。我们可以通过创建一个 404.js 文件来自定义 404 页面。
在项目的根目录下创建一个 404.js 文件，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------ ------- --------------- -
-------- -
------ -
-----
------- --- ----------
--------- --- ---- --- --- ------- --- ----- --- -- ----------
------
--
-
-
------ ------- -------------在这个文件中，我们定义了一个 NotFoundPage 组件，它会在用户访问不存在的页面时显示。
总结
在本文中，我们介绍了如何在 Next.js 中自定义错误页面和 404 页面。通过自定义错误页面和 404 页面，我们可以提高用户体验和网站的可访问性。如果你想了解更多关于 Next.js 的知识，可以访问 Next.js 官网（https://nextjs.org/）。
示例代码
完整的示例代码可以在 GitHub 上查看：https://github.com/nextjs/next.js/tree/canary/examples/custom-error-pages
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657fb97ad2f5e1655da949e1