Next.js 是一款基于 React 的服务端渲染框架，它的目的是为了提供一种简单、灵活和高效的开发方式，使得前端开发人员可以快速构建出稳定和高效的应用程序。但是在 Next.js 的开发过程中，我们难免会碰到各种各样的问题，其中 404 页面渲染问题就是一种常见的问题。在本篇文章中，我们将为大家介绍如何解决 Next.js 中的 404 页面渲染问题。
问题描述
在使用 Next.js 开发过程中，当我们输入一个不存在的路由地址时，页面就会显示 404 Not Found，但是实际上这个页面是由客户端渲染生成的，而不是服务端渲染生成的。这就导致了一些搜索引擎或者社交媒体无法正确地识别到这个页面，从而影响了 SEO 优化效果。
解决方案
方案一：使用自定义的 404 页面
Next.js 提供了一种简单的方式来解决 404 页面渲染的问题，即通过自定义 404 页面来实现。我们只需要在 pages 目录下创建一个 _error.js 文件，然后在这个文件中实现自定义的 404 页面即可。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------ - -- -- -
------ -
-----
------- --- ----------
--------------------
------
--
--
------ ------- -------------方案二：使用服务端渲染生成的 404 页面
如果我们希望 404 页面可以被搜索引擎正确识别，那么我们可以通过在服务端生成 404 页面来实现。为了实现这个功能，我们需要进行以下步骤。
在 pages 目录下创建一个
_error.js文件。在
_error.js文件中实现一个getInitialProps函数，这个函数可以从服务端获取到 http 状态码和错误信息。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- --------------- - -- ----------- ------- -- -- -
------ -
-----
---------------- ----------
----------------
------
--
--
------------------------------- - -- ---- --- -- -- -
----- ---------- - --- - -------------- - --- - -------------- - ----
----- ------- - --- - ----------------- - --- - ----------- - --------
------ - ----------- ------- --
--
------ ------- ----------------- 修改
next.config.js中的配置，使得 Next.js 在出现错误时自动渲染_error.js中定义的页面。
示例代码：
-- -------------------- ---- -------
-------------- - -
-- --- ------- --
-------- -------- - --- -- -- -
-- -- ------- --
------ -------
--
-- ------- ----
-- ----------
-- ----------------------------------
-- ----------------------------------------
-- ---------------------
-------------------- ---
-------------------- ---
--方案三：使用自定义的 Layout 组件
除了上面提到的两种方式之外，我们还可以通过使用自定义的 Layout 组件来实现 404 页面的渲染。在应用程序的 Layout 组件中，我们可以根据路由地址来判断当前页面是否是 404 页面，从而使用不同的渲染方式来实现 404 页面的渲染。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------- - -- --------- ------ -- -- -
------ -
-----
-----------------
-----------------------
------------- --- ------ - -
-----
------- --- ----------
--------------------
------
- - -----
------
--
--
------ ------- --------------总结
本篇文章主要介绍了如何解决 Next.js 中的 404 页面渲染问题。通过自定义的 404 页面、使用服务端渲染生成的 404 页面或者使用自定义的 Layout 组件，我们可以针对不同的需求选择不同的解决方案。希望本篇文章能够对大家学习和使用 Next.js 提供一些参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651bd0af95b1f8cacd36e0ff