如何在 Next.js 中创建自定义错误页面？

Next.js 是一个流行的 React 框架，用于开发服务器渲染的 React 应用程序。在使用 Next.js 过程中，我们经常需要处理错误页面。本文将介绍如何在 Next.js 中创建自定义错误页面。

步骤

第一步：创建 pages/_error.js 文件

在 Next.js 中，我们可以使用 pages/_error.js 文件来创建自定义错误页面。这个文件在渲染任何错误页面时都会被调用。我们可以在这个文件中定义我们想要展示的错误页面。

// pages/_error.js

import React from 'react';

const ErrorPage = ({ statusCode }) => {
  return (
    <div>
      <h1>{statusCode}</h1>
      <p>Oops! Something went wrong.</p>
    </div>
  );
};

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

export default ErrorPage;

在上述代码中，我们定义了一个 ErrorPage 组件。该组件接收 statusCode 属性作为参数，该参数表示错误的状态代码。我们通过该状态码来确定需要显示的错误页面。 getInitialProps 函数是 Next.js 提供的特殊函数，可用于获取服务端渲染过程中的信息。

第二步：使用自定义错误页面

在 pages 目录下，我们可以创建多个自定义错误页面，这些页面分别对应不同的错误状态码。例如，我们可以创建一个 pages/404.js 文件来处理 404 错误页面。

// pages/404.js

import React from 'react';

const NotFoundPage = () => {
  return (
    <div>
      <h1>404</h1>
      <p>Oops! The page you were looking for doesn't exist.</p>
    </div>
  );
};

export default NotFoundPage;

第三步：处理其他错误

除了以上示例以外，我们还可以使用 getInitialProps 函数处理其他错误。例如，以下代码可以处理一个抛出了 500 错误的 API 调用。

// pages/my-api.js

import React from 'react';

const MyApiPage = () => {
  // Call API and fetch data
  const data = ...;

  // Handle error
  if (data.error) {
    const error = new Error(data.error.message);
    error.statusCode = 500;
    throw error;
  }

  // Render page
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
};

MyApiPage.getInitialProps = async (ctx) => {
  try {
    const response = await fetch('https://my-api.com/data');
    const data = await response.json();
    return { data };
  } catch (error) {
    console.error(error);
    return { error };
  }
};

export default MyApiPage;

在上述代码中，我们使用 getInitialProps 函数获取 API 数据。如果返回的数据中有错误，我们会抛出一个新的错误，并将其状态码设置为 500。这个错误会被 Next.js 捕获并将其传递给 pages/_error.js 文件处理。

结论

使用以上步骤，我们可以方便地创建自定义错误页面，并在 Next.js 应用程序中处理各种错误。在这个过程中，我们学习了如何使用 pages/_error.js 文件，定义 ErrorPage 组件，使用状态码来确定错误页面类型，并处理其他错误。