在使用 Next.js 开发应用的过程中，我们难免会遇到 404 页面不存在的问题。本文将介绍一些解决 Next.js 中 404 显示问题的技巧，以及如何优化和定制 404 页面的显示效果。
解决方法1：使用自定义404页面
每当我们在 Next.js 中遇到 404 页面不存在的问题时，服务器会默认返回一个简单的默认 404 页面。
我们可以通过配置自定义 404 页面来解决这个问题。只需在 pages 目录下创建一个名为 "_error.js" 的文件，便可在服务端渲染应用程序时使用该文件进行自定义的 404 页面。
例如，我们可以创建一个 pages/_error.js 以下列代码来自定义 404 页面：
-- -------------------- ---- -------
------ ----- ---- --------
----- --------- - -- -- -
------ -
-----
-------- --- ----------
--------- --- ---- --- --- ------- --- ------ -- ----------
------
--
--
------ ------- ----------解决方法2：使用自定义404页面和动态路由
我们也可以通过自定义404代码和动态路由来更好地定制 404 页面。
在 Next.js 中，可以使用动态路由来定义自己的路由规则，这样我们可以更好地控制 404 页面的显示。
一个简单的例子是，我们可以使用动态路由和自定义404页面来轻松地处理应用程序中的多个 404 页面。例如，我们可以创建一个名为 "pages/custom-404.js" 的文件，用以下代码来定义我们的自定义 404 页面：
-- -------------------- ---- -------
------ ----- ---- --------
----- --------- - -- -- -
------ -
-----
------- - ---- --- ----------
------ --------- ---- ----- --- -- ----------
------
--
--
------ ------- ----------我们还可以使用动态路由来处理这个自定义 404 页面，在根目录的 pages 目录中创建一个名为 "[[...slug]].js" 的文件，即可处理扩展 URL 和其他未知 URL。
需要注意的是，在编写动态路由代码时，我们需要使用 getStaticPaths 和 getStaticProps 来生成动态路由静态页面。这样可以避免在服务器上每次生成页面时都要重新计算 HTML。
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- - -- ---- -- -- -
------ -
-----
---------- - ---- --- ----------
------ --------- ---- ----- --- -- ----------
------
--
--
------ ----- -------- ---------------- -
----- ----- - -- ------- - ----- ----------- - ---
------ - ------ --------- ---- --
-
------ ----- -------- ---------------- ------ -- -
----- - ---- - - -------
------ - ------ - ---- - --
-
------ ------- ------------总结
在这篇文章中，我们介绍了两种方法来解决 Next.js 中的 404 显示问题，并指导您如何定义自己的自定义 404 页面和处理动态路由。
定制优美的 404 页面可以有效提升用户体验，为您的应用程序增添更多的美感和用户友好度。希望这篇文章对您有所帮助，让您在下一次开发 Next.js 应用程序时更加得心应手！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6517ee6e95b1f8cacd0145fe