随着前端开发的发展，单页应用（SPA）和服务器渲染（SSR）成为了非常流行的技术方案。Next.js 是一种可构建任何类型的应用程序的 React 框架，它主要用于构建服务器渲染的 React 应用程序。在开发过程中，我们常常需要自定义 404 页面以提高用户体验。
Next.js 中的默认 404 页面
在 Next.js 中，默认情况下将渲染出一个简单的 404 页面。当您访问未定义的页面或路由时，该页面将显示在浏览器窗口中。此页面的结构如下所示：
-- -------------------- ---- -------
------ ---- ---- ------------
------ ------- -------- ----------- -
------ -
-----
------- - ---- --- ----------
----
----- ---------
-----------
-------
-----
------
--
-这个页面比较简单，只包含一个标题和一个返回首页的链接。但是，我们可能需要更加个性化的 404 页面，让它更好地适应我们的应用程序。
自定义 404 页面
要自定义 404 页面，我们需要创建一个名为 _error.js 的特殊页面。在这个页面中，我们可以通过重写 getInitialProps 方法来定制我们的 404 页面。
例如，如果您想要创建一个自定义 404 页面，以显示一个更加有趣和生动的图像和文字信息，请使用以下代码：
-- -------------------- ---- -------
------ ---- ---- ------------
------ ------- -------- ----------- -
------ -
-----
---- -------------- --------- --
-------------------
----
----- ---------
-----------
-------
-----
------
--
-
------------------------- - -- ---- --- -- -- -
----- ---------- - --- - -------------- - --- - -------------- - ----
------ - ---------- --
--在这段代码中，我们加载了一个自定义的 404.png 图片，并向用户提供了一个友好的文本信息。此外，我们还使用 getInitialProps 方法来从 res 或 err 对象中获取状态码，并将其传递给组件的 props 属性中。这个状态码最终会影响到服务器渲染的错误页面。
总结
通过本文，我们了解了如何自定义 Next.js 应用程序中的 404 页面。我们可以利用 _error.js 页面重写 getInitialProps 方法来定制我们的错误页面，使其更加个性化和用户友好。在实际开发中，根据应用程序的需求和风格，我们可以创建不同的 404 页面，以提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465dc06968c7c53b0686620