如何在Next.js App Router中创建500内部服务器错误自定义页面？

在 App Router 中，没有单独的 500.js 文件来处理服务器错误，而是通过以下两种方式实现错误捕获：

• 全局服务器错误捕获：在 app 目录下创建 error.js（或 .jsx/.tsx）文件，导出默认客户端组件，用于捕获整个路由树中的服务器组件运行时错误。
• 客户端组件错误捕获：在客户端组件内使用 React 的 useErrorBoundary Hook，处理组件自身的客户端运行时错误。

全局服务器错误页面示例（app/error.jsx） #

'use client'; // 必须声明为客户端组件

export default function Error({ error, reset }) {
  return (
    <div className="error-page">
      <h2>服务器异常（500）</h2>
      <p>{error.message || '未知错误'}</p>
      <button onClick={() => reset()}>尝试重新加载</button>
    </div>
  );
}

客户端组件内错误捕获示例 #

'use client';

import { useErrorBoundary } from 'react';

function ClientContent() {
  const { error, resetErrorBoundary } = useErrorBoundary();

  if (error) {
    return (
      <div>
        <h3>客户端加载出错</h3>
        <button onClick={resetErrorBoundary}>重试</button>
      </div>
    );
  }

  // 正常渲染逻辑
  return <div>客户端组件内容</div>;
}

export default ClientContent;

注意点 #

• error.js 是路由级别的错误边界，只会捕获其所在路由分支下的服务器组件错误，客户端组件错误需要单独用 useErrorBoundary 处理。
• 调用 reset() 或 resetErrorBoundary() 会尝试重新渲染出错的组件树。

内容的提问来源于stack exchange，提问作者erfun ghodoosi