Next.js 如何自定义错误页面？

推荐答案

在 Next.js 中，自定义错误页面可以通过创建 _error.js 文件来实现。这个文件应该放在 pages 目录下。_error.js 文件是一个特殊的页面组件，用于处理 404、500 等错误。

以下是一个简单的自定义错误页面示例：

// www.javascriptcn.com code example
// pages/_error.js
import React from 'react';

function Error({ statusCode }) {
  return (
    <div>
      <h1>
        {statusCode
          ? `An error ${statusCode} occurred on server`
          : 'An error occurred on client'}
      </h1>
    </div>
  );
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

export default Error;

本题详细解读

1. _error.js 文件的作用

_error.js 是 Next.js 中用于处理错误的特殊页面。当应用程序发生错误时（例如 404 或 500 错误），Next.js 会自动渲染这个页面。

2. statusCode 的获取

在 Error.getInitialProps 方法中，我们可以通过 res 和 err 对象来获取错误的状态码。res 是服务器端的响应对象，err 是错误对象。如果 res 存在，我们可以通过 res.statusCode 获取状态码；如果 res 不存在，但 err 存在，我们可以通过 err.statusCode 获取状态码。如果两者都不存在，默认返回 404。

3. 自定义错误页面的内容

在 Error 组件中，我们可以根据 statusCode 的值来显示不同的错误信息。例如，如果是 404 错误，可以显示“页面未找到”；如果是 500 错误，可以显示“服务器内部错误”。

4. 客户端与服务器端的错误处理

_error.js 文件既可以处理服务器端的错误，也可以处理客户端的错误。当错误发生在服务器端时，res 对象会存在；当错误发生在客户端时，err 对象会存在。

5. 自定义样式与布局

你可以在 _error.js 文件中添加自定义的样式和布局，使其与应用程序的其他页面保持一致。例如，你可以使用 CSS 模块或全局样式来美化错误页面。

通过这种方式，你可以轻松地在 Next.js 中自定义错误页面，并根据不同的错误类型显示不同的内容。