Next.js Typescript error page

_error.tsx

import { NextPageContext } from "next";

const Error = ({ statusCode }) => {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : "An error occurred on client"}
    </p>
  );
};

Error.getInitialProps = ({ res, err }: NextPageContext) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

export default Error;

@tim1uphealth you mean like this?

import { NextPageContext } from "next";

interface ErrorComponentProps {
	statusCode?: number;
}

function ErrorComponent({ statusCode }: ErrorComponentProps): JSX.Element {
	return (
		<p>
			{statusCode
				? `An error ${statusCode} occurred on server`
				: "An error occurred on client"}
		</p>
	);
}

ErrorComponent.getInitialProps = ({ res, err }: NextPageContext) => {
	const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
	return { statusCode };
};

export default ErrorComponent;

NextPage TypeScript type on the component seems to handle everything.

import { NextPage } from 'next';
const Error: NextPage = () => {......}
Error.getInitialProps = ({ res, err }) => {.....};
export default Error;