前言
Next.js 是一个非常流行的 React 服务器端渲染框架，它通过预渲染和动态渲染的结合，实现了快速、可靠、易用的 SSR 开发体验。但是，在具体实践过程中，我们也可能遇到一些困难和坑，例如 Next.js 中的 404 页面问题，本文就来详细讨论这个问题。
问题描述
在使用 Next.js 进行服务端渲染时，如果在服务端渲染的过程中，刚好请求的是一个不存在的页面，那么服务端会返回一个 404 状态码。但是，在某些情况下，这种行为可能不是我们想要的，我们想要返回一个自定义的 404 页面，并且这个页面的内容也需要服务器端渲染。
解决方案
解决这个问题，我们需要了解两个概念：
- Custom App
- Custom Error Page（自定义错误页面）
Custom App 是 Next.js 生命周期中的一个钩子，用来自定义 Next.js 的 App 组件，可以在这里进行一些全局的配置，例如引入 CSS、添加系统提示等等。Custom Error Page 则是用来自定义错误页面的，在这里可以自定义 404、500 等等错误页面。
实现方案
在 Custom App 中，我们可以通过 props.statusCode 获取当前页面的状态码，然后作为传入 Custom Error Page 组件的 props，用来渲染不同的错误页面。所以，我们需要先自定义 Custom Error Page：
-- -------------------- ---- -------
-- ---------------
------ ----- ---- -------
----- --------- - -- ---------- -- -- -
------ -
-----
--------- -----------------
------
-
-
------ ------- ---------这里的 ErrorPage 组件接受一个 statusCode 的 props，用来显示错误页面的状态码。
然后，在 Custom App 中，根据当前页面的状态码来决定是否要显示错误页面，示例如下：
-- -------------------- ---- -------
-- -------------
------ ----- ---- -------
------ --- ---- ----------
------ --------- ---- ----------
----- --------- ------- --- -
------ ----- ----------------- ---------- ------- --- -- -
--- -----------
----- --------- - -------------------------
- ----- ------------------------------
- ---
-- --------- -
---------- - -------------------
-
------ - ---------- ---------- --
-
-------- -
----- - ---------- ---------- ---------- - - -----------
-- ----------- --- ---- -
------ ---------- ----------------------- --
-
------ -
-----
---------- -------------- --
------
-
-
-
------ ------- ---------这里我们通过 getInitialProps 获取当前页面的状态码，然后在 render 中决定是否要显示错误页面组件。
示例代码
为了更好理解上面的实现方案，这里给出具体的示例代码，并且通过浏览器和命令行来展示效果。
首先，我们创建一个 Next.js 项目：
npx create-next-app next-404-demo
然后，我们创建一个自定义的 404 页面：
-- -------------------- ---- -------
-- ---------------
------ ----- ---- -------
----- --------- - -- ---------- -- -- -
------ -
-----
--------- -----------------
------
-
-
------ ------- ---------接着，我们修改自定义的 Custom App：
-- -------------------- ---- -------
-- -------------
------ ----- ---- -------
------ --- ---- ----------
------ --------- ---- ----------
----- --------- ------- --- -
------ ----- ----------------- ---------- ------- --- -- -
--- -----------
----- --------- - -------------------------
- ----- ------------------------------
- ---
-- --------- -
---------- - -------------------
-
------ - ---------- ---------- --
-
-------- -
----- - ---------- ---------- ---------- - - -----------
-- ----------- --- ---- -
------ ---------- ----------------------- --
-
------ -
-----
---------- -------------- --
------
-
-
-
------ ------- ---------这里我们在 Custom App 中加入了获取状态码和根据状态码判断是否要渲染错误页面的逻辑。
最后，我们创建两个页面：index 和 about，其中 index 页面存在，about 页面不存在：
// pages/index.js const Index = () => <h1>Hello Next.js</h1> export default Index
// pages/about.js const About = () => <h1>About Page</h1> export default About
现在，我们可以先启动服务：
npm run dev
在浏览器中访问 http://localhost:3000/ ，可以看到 index 页面已经渲染出来。
接着，我们访问 http://localhost:3000/about ，此时应该显示我们自定义的 404 页面。使用浏览器打开控制台，查看网络请求返回码，可以看到该页面的状态码为 404：
这说明我们的自定义 404 页面已经生效。如果你想通过命令行来查看，可以在控制台输入以下命令：
curl -I http://localhost:3000/about
输出结果如下：
HTTP/1.1 404 Not Found X-Powered-By: Next.js ...
总结
通过自定义 Custom App 和 Custom Error Page，我们可以方便地解决 Next.js 服务器端渲染遇到的 “404 坑”，同时也可以为我们提供更丰富的 Server-Side Rendering 实践经验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f7eb78f6b2d6eab301d6ed