推荐答案
在 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 页面添加样式、图片、链接等内容。例如：
-- -------------------- ---- -------
-- ------------
------ ------ ---- ---------------------------
------ ------- -------- ----------- -
------ -
---- -----------------------------
------- - ----------- ----- -------------
--------- --------- ---- ----- -- --- ---- ------ --- ----- ----------
------
--
-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 页面。