Next.js 是一个基于 React 的 SSR 框架。在开发过程中，处理错误是一个非常重要的问题。因为错误的出现会导致用户体验非常不好，有时候也会泄露一些敏感信息。因此，Next.js 怎么处理错误页面展示非常值得我们学习。
1. 默认的错误页面
在 Next.js 中，默认的错误页面是一个纯 HTML 页面，其中只包含了错误信息。这在开发过程中是非常不友好的。为了更好的用户体验，我们需要在错误页面中添加一些我们自己的信息，比如自定义的错误信息，或者一些联系方式等。
2. 自定义错误页面
在 Next.js 中，我们可以使用 _error.js 文件来自定义错误页面，这个文件位于 pages 文件夹下。当 Next.js 出现错误时，会自动调用 _error.js 中的 getInitialProps 方法，在这个方法中我们可以获取到错误信息，然后将其传递给自己的错误页面组件。
-- -------------------- ---- -------
------ ----- ---- --------
----- --------- ------- --------------- -
------ ----- ---------------------- -
----- ---------- - ----- - ---------------- - -----
------ - ---------- --
-
-------- -
----- - ---------- - - -----------
------ -
-----
--------- -----------------
--------------------------------------------
------------------------
------
-
-
-
------ ------- ----------3. 错误页面的展示
在 Next.js 中，我们可以使用 next.config.js 文件中的 onError 回调函数来自定义错误页面的展示方式。如果需要展示自定义错误页面，我们可以在这个函数中通过 res 参数将页面重定向到我们自定义的错误页面组件。
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - -------------------- --- -------------
----- --- - ------ --- ---
----- ------ - ------------------------
--------------------- -- -
----- ------ - ----------
--------------- ----- ---- -- -
----------- -------------- -- -
-----------------
------------------------------ ------ --------
---
---
------------------- -- -- -
---------------------- -- ---- -------
---
----------- -- -
------------------------
----------------
---
-- - -------------- --------
-------------- - -
------------ ---- ---- -
--------------------------------- - ----------- --- ---
-
--4. 总结
在 Next.js 中，处理错误页面展示非常重要，能够大大提升用户体验。我们可以使用自定义的错误页面组件来展示自己的错误信息和联系方式等。而在 next.config.js 文件中的 onError 回调函数中，我们可以用重定向的方式将页面展示出来，为用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b704f968c7c53b0dc5254