前言
Next.js 是一款由 Zeit 公司开发的 React 服务端渲染框架。它提供了一些强大的功能，如自动代码分割、预渲染、服务器渲染、静态导出等等。但是，当应用程序出现错误时，我们需要做的是捕获它并提供相应的反馈。在这篇文章中，我们将学习如何在 Next.js 中处理服务器端错误，以帮助我们构建更好的用户体验。
服务器端错误处理
在客户端 JavaScript 中，我们通常使用 try/catch 语句来捕获错误，并提供相应的错误处理。但是，在服务端渲染应用程序中，错误的处理方式会有所不同。例如，在客户端渲染应用程序中，错误只会影响到当前正在运行的组件，但在服务端渲染应用程序中，我们必须更加小心，因为错误可能导致整个页面崩溃。
在 Next.js 中，我们可以使用 getInitialProps 或自定义的 getServerSideProps 来获取异步数据并在服务器端渲染页面。当发生错误时，Next.js 将为我们提供一些错误处理的选项。
返回错误页面
第一种处理错误的方法是返回一个错误页面。当我们使用 getInitialProps 或自定义的 getServerSideProps 函数时，如果它们中的任何一个抛出一个错误，Next.js 将显示一个内置的错误页面。不过，我们可以覆盖该错误页面，并展示我们自己设计的错误页面。
--------------------- - -- ---- --- -- -- - ----- ---------- - --- - -------------- - --- - -------------- - ---- ------ - ---------- -- -- -------- ------- ---------- -- - ------ -------------- - --- ----- ------------- -------- -- ------- - --- ----- -------- -- ------------- - ------ ------- ------
在这个例子中，我们可以查看当前请求的 HTTP 状态码（404、500 等）。如果状态码能获取到，我们就展示出相应的错误消息。如果状态码无法获取，则提示客户端操作失败。
自定义错误处理
另一种常见的处理错误的方法是自定义错误处理器。Next.js 允许我们使用 Express 中间件管理请求和响应。因此，我们可以创建自定义错误处理器来捕获错误并提供反馈。
-------- ----------- -
------ ------- - ---- --- -----------
-
-- ---- -------- ---- ------ -- ----- ----
------ ----- -------- ---------------- -
-- ---- -- -------- --- -------- -- --- -----
----- --- - ----- ---------------------------
----- ----- - ----- -----------
-- --- --- ----- -- ---- -- ---------- ----- -- -----
----- ----- - ---------------- -- --
------- - --- ------- -
----
-- ----- ---------- ---- ----- ----- -- ----- -----
-- - --------- ----- - ----- ----- ------ ------ ----
------ - ------ --------- ----- --
-
-- ---- ---- ---- ------ -- ----- ----
------ ----- -------- ---------------- ------ -- -
-- ------ -------- --- ---- -----
-- -- --- ----- -- ---- --------- ---- --------- -- -
----- --- - ----- ----------------------------------------
----- ---- - ----- -----------
-- ---- ---- ---- -- --- ---- --- -----
------ - ------ - ---- - --
-
------ ------- -------- ------ ---- -- -
-- ------ -------
-
------ -------- ----------------- ---- ---- ----- -
-------------------------
------------------------------- ---------
-
------ ------- -------- ----- ---- -
--- -
-- ---
- ----- ----- -
------- - ----
----------
-
-
-- ------ --- ------ ---- ----------
-- ----------------------------------------------------------------------------
----- ------- - ----- ---- -- -
----- -------- - -------------- ------
----- - --------- ----- - - ---------
----- ----- - -----------------
-- ------- -
------ --------------- ---- ----------- -------
-
------ ----------- -----
--
------ ------- ----在这个例子中，当访问不存在的页面时，我们展示出一个自定义的错误页面（Custom404）。另外，我们还使用一个中间件来捕获服务器端错误，并提供处理方式（errorHandler）。当发生错误时，所有 Next.js 服务端中间件都将调用此错误处理程序，从而保证我们能够及时地处理错误。
结论
在本文中，我们学习了如何在 Next.js 中处理服务器端错误，以及如何简单地为用户提供反馈。Next.js 为我们提供了一些内置功能来处理可能出现的错误，同时也允许我们自定义错误处理程序。通过这些方法，我们可以更好地为用户构建出更好的用户体验。
参考
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6723238a2e7021665e0e936b