在开发 Web 应用时，处理错误页面是非常重要的一部分。当用户访问不存在的页面时，最好的方法是给用户一个友好的提示页面。Next.js 提供了很多易于使用的工具来处理 404 页面。本文将详细介绍 Next.js 404 页面的处理方法，包括自定义 404 页面、设置默认 404 页面和动态生成 404 页面。
自定义 404 页面
在 Next.js 中，自定义 404 页面非常简单。只需在 pages 目录下创建一个名为 404.js 的文件即可。该页面将作为所有未找到页面的默认页面。例如：
-- -------------------- ---- -------
------ ---- ---- ------------
------ ------- -------- ---------- -
------ -
-----
------- - ---- --- ----------
--------- --- ---- --- --- ------- --- ---- --- ----------
----- ---------
----- -- ---- --------
-------
------
--
-在该文件中，您可以编写任何您想要的东西，例如您的应用程序的标志或甚至一些有趣的东西。您还可以在这个页面上放置一些链接，以便让用户返回 app 的其他部分。
设置默认 404 页面
如果您想设置默认的 404 页面，只需在 _error.js 页面中编写代码并导出 Error 组件。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ------------
----- ----- ------- --------------- -
------ ----------------- ---- --- -- -
----- ---------- - --- - -------------- - --- - -------------- - -----
------ - ---------- --
-
-------- -
------ -
-----
----
----------------------
- --- ----- ------------------------ -------- -- -------
- --- ----- -------- -- --------
-----
--------- --- ---- --- --- ------- --- ---- --- ----------
----- ---------
----- -- ---- --------
-------
------
--
-
-
------ ------- ------在上面的代码中，我们定义了 Error 组件，该组件根据应用程序返回的不同状态代码进行不同的操作。如果应用程序返回状态码，则显示该状态码。否则，它将返回一个“默认”错误消息。
动态生成 404 页面
在某些情况下，您可能希望动态生成 404 页面。例如，当用户访问不存在的文章时，您可能希望显示类似“此文章不存在”的消息。这可以通过在页面组件中使用 getStaticProps 或 getServerProps 方法实现。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ------------
------ ------- -------- ------ ---- -- -
-- ------- -
------ -
-----
------- - ------- --- ----------
------- ------- ---- --- ----------
----- ---------
----- -- ---- --------
-------
------
--
-
------ -
-----
---------------------
------------------
----- ---------
----- -- ---- --------
-------
------
--
-
------ ----- -------- ---------------- -
----- --- - ----- ----------------------------------------------------
----- ----- - ----- -----------
----- ----- - ---------------- -- -- ------- - --- ------------ - ----
------ - ------ --------- ---- --
-
------ ----- -------- ---------------- ------ -- -
----- --- - ----- ------
---------------------------------------------------------
--
----- ---- - ----- -----------
------ - ------ - ---- - --
-在此示例中，我们使用了 getStaticProps 方法来获取具有给定 ID 的文章，并将其传递给组件。如果无法找到文章，则组件将显示“404 - 文章未找到”消息。
总结
404 页面是 Web 应用程序中重要且易于忽略的部分。Next.js 提供了许多工具来处理 404 页面，包括自定义 404 页面、设置默认 404 页面和动态生成 404 页面。希望这篇文章对您有所帮助，让您更好地处理您的应用程序中的各种错误情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649fc3f748841e9894c1f4c5