Пользовательская страница серверной ошибки и getInitialProps в Next.js

В next.js-проекте при возникновении серверной ошибки страница 500.tsx отображается на несколько секунд, а затем появляется надпись Application error: a client-side exception has occurred (see the browser console for more information). При этом если убрать getInitialProps у компонента _app.tsx, то страница 500.tsx срабатывает нормально. Как сделать так, чтобы страница 500.tsx работала правильно вместе с getInitialProps?

_app.tsx

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

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

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

export default MyApp;

index.tsx

import type { GetServerSideProps, NextPage } from 'next';

const Home: NextPage = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async ({ res }) => {
  res.statusCode = 500;
  throw new Error('Server error');
};

export default Home;

components/error-boundary.tsx

import { Component, ErrorInfo, ReactNode } from 'react';

interface Props {
  children?: ReactNode;
}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
  public state: State = {
    hasError: false,
  };

  public static getDerivedStateFromError(_: Error): State {
    return { hasError: true };
  }

  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('Uncaught error:', error, errorInfo);
  }

  public render() {
    if (this.state.hasError) {
      return <h1>Sorry.. there was an error</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

package.json

{
  "name": "error",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.2.2",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.0.5",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "eslint": "8.19.0",
    "eslint-config-next": "12.2.2",
    "typescript": "4.7.4"
  }
}


Ответы (0 шт):