Nextjs 如何使用 typescript 输入错误页面

Question

如何使用 Typescript 输入 nextjs 错误页面

我尝试过：

interface ErrorProps {
  statusCode: number;
}
function Error({ statusCode }: ErrorProps) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : "An error occurred on client"}
    </p>
  );
}

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

但不确定这是正确的方法

Answer 1

我正在完美地使用下面的代码。检查这个！

请参阅有关 Typescript 的 Next.js 错误页面的更多详细信息

import { NextPage, NextPageContext } from 'next';


interface Props {
    statusCode?: number
}

const Error: NextPage<Props> = ({ 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