概述
默认情况下，当用户在 Next.js 中请求不存在的页面时，会显示一个简单的 404 页面。但是，你可以通过自定义 404 页面来提供更加友好和个性化的用户体验。本文将介绍如何在 Next.js 中自定义 404 页面。
实现步骤
第一步：创建自定义 404 组件
首先，你需要创建一个名为 404.js 的文件，它将作为自定义 404 页面的组件。该组件应该包含你想要在页面上呈现的内容。比如：
-- -------------------- ---- -------
------ ---- ---- ------------
------ ------- -------- ----------- -
------ -
-----
------- - ----------
------------------- ----- -----------------------
------
--
-第二步：使用自定义 404 组件
在你的 Next.js 应用程序中，你需要配置一个自定义 404 页面。在 /pages 目录下创建一个名为 _error.js 的文件。然后，在该文件中导入自定义 404 组件，并将其返回到 getInitialProps 方法。
-- -------------------- ---- ------- ------ --------- ---- -------------------- ------ ------- -------- ------- - ------ ---------- --- - --------------------- - -- ---- --- -- -- - ----- ---------- - --- - -------------- - --- - -------------- - ---- ------ - ---------- -- --
在上面的代码中，我们首先导入自定义 404 组件。然后，我们将其返回到 Error 组件中。最后，我们通过 getInitialProps 方法来获取状态码，并将其传递给自定义 404 组件。
第三步：使用 next/link 组件
在你的自定义 404 组件中，你可以使用 next/link 组件来创建一个返回首页的链接。这样，用户就可以通过单击该链接返回到你的网站的首页。
<Link href="/"> <a>返回首页</a> </Link>
示例代码
-- -------------------- ---- -------
-- -----------------
------ ---- ---- ------------
------ ------- -------- ----------- -
------ -
-----
------- - ----------
------------------- ----- -----------------------
------
--
--- -------------------- ---- ------- -- --------------- ------ --------- ---- -------------------- ------ ------- -------- ------- - ------ ---------- --- - --------------------- - -- ---- --- -- -- - ----- ---------- - --- - -------------- - --- - -------------- - ---- ------ - ---------- -- --
结论
在 Next.js 中自定义 404 页面非常简单。你只需要创建一个自定义 404 组件，然后在 _error.js 文件中使用该组件即可。通过这种方式，你可以为你的用户提供更加友好和个性化的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670105440bef792019b05e2c