Next.js 如何创建 500 页面？

推荐答案

在 Next.js 中，创建 500 页面非常简单。你只需要在 pages 目录下创建一个名为 500.js 或 500.tsx 的文件。这个文件会自动被 Next.js 识别为自定义的 500 错误页面。

// pages/500.js
export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>;
}

本题详细解读

1. 500 页面的作用

500 页面是用于处理服务器端错误的页面。当服务器在处理请求时发生错误，Next.js 会自动渲染这个页面，而不是显示默认的错误页面。

2. 创建 500 页面的步骤

• 步骤 1: 在 pages 目录下创建一个名为 500.js 或 500.tsx 的文件。
• 步骤 2: 在该文件中导出一个 React 组件，这个组件将作为 500 页面的内容。
• 步骤 3: 在组件中编写你想要展示的错误信息或 UI。

3. 自定义 500 页面的样式和内容

你可以像编写普通页面一样，为 500 页面添加样式、图片、链接等内容。例如：

// www.javascriptcn.com code example
// pages/500.js
import styles from '../styles/500.module.css';

export default function Custom500() {
  return (
    <div className={styles.container}>
      <h1>500 - Server-side error occurred</h1>
      <p>Sorry, something went wrong on our end. Please try again later.</p>
    </div>
  );
}

4. 500 页面的自动处理

Next.js 会自动处理 500 页面的渲染，你不需要手动调用或配置。当服务器端发生错误时，Next.js 会自动使用你定义的 500 页面来替代默认的错误页面。

5. 500 页面的测试

你可以通过模拟服务器端错误来测试 500 页面是否正常工作。例如，在 API 路由中抛出一个错误：

// pages/api/test.js
export default function handler(req, res) {
  throw new Error('Server error');
  res.status(200).json({ message: 'Hello' });
}

访问 /api/test 时，Next.js 会自动渲染你定义的 500 页面。