如何让Next.js自定义500错误页与_app的getInitialProps共存？

问题原因 #

当_app.tsx中定义getInitialProps时，Next.js的默认错误处理流程会被覆盖。服务器端getServerSideProps抛出的错误原本应直接渲染自定义500.tsx，但由于_app中包裹了ErrorBoundary，客户端hydration阶段会捕获到服务器端返回的错误状态，触发ErrorBoundary后，Next.js的客户端错误系统会接管并显示默认提示，导致自定义错误页仅短暂显示。

解决方案 #

方案一：移除_app中的ErrorBoundary（最简方案） #

Next.js的自定义500.tsx专门用于处理服务器端错误，无需额外在_app中添加ErrorBoundary，否则会与原生错误处理逻辑冲突。修改_app.tsx如下：

import '../styles/globals.css';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  const { lang } = pageProps;
  return (
    <>
      <div>{lang}</div>
      <Component {...pageProps} />
    </>
  );
}

MyApp.getInitialProps = async () => {
  return {
    pageProps: {
      lang: 'en',
    },
  };
};

export default MyApp;

方案二：改用getServerSideProps获取全局数据（官方推荐） #

Next.js 12+官方不推荐在_app中使用getInitialProps，建议用getServerSideProps替代以获取服务器端全局数据，同时保留原生错误处理流程：

import '../styles/globals.css';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  const { lang } = pageProps;
  return (
    <>
      <div>{lang}</div>
      <Component {...pageProps} />
    </>
  );
}

export async function getServerSideProps() {
  return {
    props: {
      lang: 'en',
    },
  };
}

export default MyApp;

方案三：保留ErrorBoundary但限制客户端触发（需保留边界时使用） #

若必须保留ErrorBoundary，需确保它仅处理客户端运行时错误，不干扰服务器端错误渲染：

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import ErrorBoundary from '../components/error-boundary';
import { useEffect, useState } from 'react';

function MyApp({ Component, pageProps }: AppProps) {
  const [isClient, setIsClient] = useState(false);
  const { lang } = pageProps;

  useEffect(() => {
    setIsClient(true);
  }, []);

  return (
    <>
      <div>{lang}</div>
      {isClient ? (
        <ErrorBoundary>
          <Component {...pageProps} />
        </ErrorBoundary>
      ) : (
        <Component {...pageProps} />
      )}
    </>
  );
}

MyApp.getInitialProps = async () => {
  return {
    pageProps: {
      lang: 'en',
    },
  };
};

export default MyApp;

验证前提 #

确保项目根目录的pages文件夹中存在自定义500.tsx：

// pages/500.tsx
export default function Custom500() {
  return <h1>自定义500错误页</h1>;
}

内容的提问来源于stack exchange，提问作者John Doe