当用户在访问我们网站的时候，有时会遇到一些错误页面，如 404（找不到页面）、500（服务器错误）等。这些错误页面对于用户体验来说十分重要，因为如果用户看到随意、不专业的错误页面，可能会立刻离开我们的网站。
在 Next.js 中如何优雅地处理 404 页面呢？本文将带你深入了解 Next.js 中处理 404 页面的方式，并提供示例代码和指导意义，让你快速实现一个合格的 404 页面。
Next.js 的默认 404 页面
在 Next.js 应用程序中，如果用户访问一个没有对应页面时，它默认会返回一个简单的 404 页面。这个默认的 404 页面的布局很简单，包含一张错误图片和一些文本：
------ ---- ---- -----------
----- --------- - -- -- -
------ -
---- --------------- -------- -------------- ------------ -------- --------
---- -------------- --------------- ------ --------------- -------- --- --------
-- ------------------ ------------- ------
----------------- --- -----
--------------
----
----- ---------
-- ---------------------- ----------------- ---------- ---- ---- ---------
----
----
-------
------
-
-
------ ------- ---------如果我们不需要自定义 404 页面，可以忽略本文的下一部分，直接跳到接下来的部分「自定义 404 页面」。
自定义 404 页面
如果我们想要将 404 页面做得更好看一些、更符合我们网站的风格，可以完全自定义这个页面。为了自定义 404 页面，我们需要创建一个名为 404.js 的页面，放在项目的根目录下。这个页面负责显示用户访问不存在的页面时，呈现自定义的 404 页面。
自定义 404 页面的基本打法如下：
------ ---- ---- -----------
----- --------- - -- -- -
------ -
---- --------------- -------- -------------- ------------ -------- --------
--- ------------------- --------- ------------- ------
--- --- ------
-----
---- -------------- --------------- ------ --------------- -------- --- --------
-- ------------------ ------------- ------
----------------- --- -----
--------------
----
----- ---------
-- ---------------------- ----------------- ---------- ---- ---- ---------
----
----
-------
------
-
-
------ ------- ---------在这个自定义的 404 页面中，我们首先加了一个大标题，告诉用户这是 404 页面。然后加入了一个图片，一张 404 的图片，这是 Next.js 提供的默认图片，我们也可以根据需要自定义一个图片。接着是一段描述消息，告诉用户这个页面不存在。最后是一个回到主页的链接，让用户可以快速返回到我们的网站首页。
如何处理动态路由的 404 页面
在 Next.js 应用中，我们常常会用到动态路由，如：
-- --------------------
------ - --------- - ---- -------------
----- -------- - -- -- -
----- ------ - -----------
----- - ---- - - ------------
-- -- ---- -----------
------ -
-----
-----------------------
---------------------------
------
-
-
------ ------- --------在这个例子中，我们用到了动态路由的功能，使用方括号来标记变量部分，这个变量部分会被当做路由参数传入到组件中。
但是如果用户访问一个不存在的动态路由，我们需要怎样处理呢？
首先我们需要在 404.js 中引入 useRouter：
------ - --------- - ---- -------------
接着在 Custom404 组件中，我们需要根据 useRouter 的 query 属性来确定 404 页面显示的内容。
----- --------- - -- -- -
----- ------ - -----------
----- - ------ - - ------
------ -
---- --------------- -------- -------------- ------------ -------- --------
--- ------------------- --------- ------------- ------
--- --- ------
-----
---- -------------- --------------- ------ --------------- -------- --- --------
-- ------------------ ------------- ------
------ ---------- ----------- --- -----
--------------
----
----- ---------
-- ---------------------- ----------------- ---------- ---- ---- ---------
----
----
-------
------
-
-这里我们用到 useRouter 的 asPath 属性，用来获取用户访问的路由路径。如果路由路径是 /blog/some-post，则会显示「您访问的页面 /blog/some-post 不存在」的提示信息。
如何处理静态文件的 404 页面
在 Next.js 应用程序中，我们还可以放置静态文件，如图片、视频、PDF 等，这些文件都可以放在 public 目录下。但是如果用户试图访问不存在的文件时，其中某些文件（例如图片）是不会返回 404 错误的，而是会返回一张默认的图片。
为了解决这个问题，我们可以在 pages > _error.js 中添加一些代码：
-- ---------------
------ ----- ---- -------
----- ----- ------- --------------- -
------ ----- ----------------- ---- --- -- -
----- ---------- - --- - -------------- - --- - -------------- - ----
------ - ---------- -
-
-------- -
----- - ---------- - - ----------
------ -
---- ------------------------
--- ------------------- ------
----------- - --- ----- ------------- -------- -- ------- - --- ----- -------- -- --------
-----
-- ------------------- ------
------------ -- ---------- --- ---- - ---- ---- --- ---- ------- --- --- --- ------- - ------- --- ----- -- - --- ----------
----
------
-
-
-
------ ------- -----这里我们定义了一个名为 Error 的组件，对于在服务器上出现的错误，它会返回错误代码 500，否则它会显示 Please try again in a few moments. 等待重新加载。对于 404 错误，它会显示 The page you were looking for was not found.。
如何应对浏览器的 404 错误
有时候，当我们用浏览器访问 404 页面时，它会显示浏览器自带的 404 页面，而非我们自定义的 404 页面。为了应对这种情况，我们需要在服务器端返回 HTTP 404 状态码，以便浏览器正确地渲染自定义 404 页面。
为了返回 HTTP 404 状态码，我们可以使用 Next.js 中的 notFound 属性：
------ ------- -------- -------- ---- -- -
-- ------- -
------ ------ ---------------- --
-
------ -
-----
------
------
-
-在这个例子中，我们先对数据进行了检查，如果不存在，则使用 Error 组件返回 HTTP 404 错误。注意，我们传递了 statusCode={404} 参数，Next.js 会自动将其转换为 HTTP 404 错误码。
总结
本文讲解了 Next.js 中如何优雅地处理 404 页面。我们可以使用 Next.js 内置的默认 404 页面，也可以完全自定义页面内容。如果我们用到了动态路由，那么我们需要对自定义的 404 页面进行一些特殊的处理。此外，我们还需要在服务器端返回正确的 HTTP 错误码，以便浏览器能够正确地渲染自定义的 404 页面。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/665530a5d3423812e49af9c2