在构建前端应用程序时，一个常见的问题是如何处理“页面未找到”的情况。由于许多应用程序都是单页面应用程序，所以必须显式地处理这种情况，以便用户得到有意义的反馈。
Next.js 是一个非常流行的 React 框架，可以优雅地处理这种情况。在本文中，我们将探讨如何使用 Next.js 的自定义 404 页面来提高用户体验。
配置自定义 404 页面
在 Next.js 中，您可以为 404 错误页面创建名为 404.js 的专用页面。当 Next.js 确定它正在处理一个 404 HTTP 请求时，该页面将被自动加载。
为了创建一个自定义的 404.js 页面，您可以按照下列步骤进行操作：
- 在您的项目的根目录中创建一个名为
pages的文件夹（如果它不存在）。 - 在
pages文件夹中创建一个名为404.js的文件。 - 编写您的自定义 404 页面代码。
下面是一个例子：
-------- ----------- -
------ -
---- ----------------------
------- - ---- --- ----------
------ ---- --- --- ------- --- ---- --- ----------
------
-
-
------ ------- ---------在这个例子中，我们简单地渲染了一个标题和一条错误消息。当用户访问不存在的页面时，会看到这个自定义页面。
为 404 页面添加样式
默认情况下，您的自定义 404 页面将遵循您在应用中使用的样式。但是，您可能希望为该页面使用不同的样式，以便它与您的应用程序的其他部分有所区别。
要为您的自定义 404 页面添加样式，您可以按照下列步骤进行操作：
- 在您的项目中创建一个名为
404.module.css的文件，并在其中定义所需的样式。 - 在您的
404.js页面代码中导入该 CSS 文件。 - 在您的 JSX 代码中使用所需的 CSS 类名。
下面是一个例子：
---------- - ---------- ------ ------- - ----- ----------- ------- - -- - ---------- ----- ------------ ----- -------------- ----- - - - ---------- ----- ------ ----- ------------ ---- -
------ ------ ---- ------------------
-------- ----------- -
------ -
---- -----------------------------
------- - ---- --- ----------
------ ---- --- --- ------- --- ---- --- ----------
------
-
-
------ ------- ---------添加样式后，您的自定义 404 页面应该更加美观和易于阅读。
链接到首页
当用户访问一个不存在的页面时，他们通常希望能够迅速返回主页。为了提高用户体验，您应该在您的自定义 404 页面上添加一个链接到主页的按钮。
要添加此链接，您可以执行以下操作：
- 在
pages文件夹中创建名为index.js的主页文件（如果它不存在）。 - 在您的自定义 404 页面代码中添加一个指向主页的链接。
下面是一个例子：
------ ---- ---- ------------
------ ------ ---- ------------------
-------- ----------- -
------ -
---- -----------------------------
------- - ---- --- ----------
------ ---- --- --- ------- --- ---- --- ----------
----- ---------
-- ---------------------------------- -- --------
-------
------
-
-
------ ------- ---------上面的代码使用 Link 组件从自定义 404 页面链接回到主页。
结论
在本文中，我们探讨了如何使用 Next.js 的自定义 404 页面来提高用户体验。我们解释了如何创建自定义 404 页面，如何为其添加样式以及如何在页面上添加主页链接。
通过使用自定义 404 页面，您可以向用户提供更有用和更具吸引力的错误处理体验，从而提高您应用程序的质量和可用性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672edd22eedcc8a97c8b160f