next.js 带有正确状态码的自定义错误页面

dm7nw8vv 于 2022-12-18 发布在其他

关注(0)|答案(1)|浏览(177)

我关注了下一个docs regarding a custom error page。如果在getStaticProps发生某些错误，我想重用错误页面。类似于：

const Page: NextPage<Props> = ({ pageData, error }: Props) => {
  if (error) return <Error statusCode={500} />;
  return <Page data={pageData} />;
};

export const getStaticProps: GetStaticProps = async ({
  params,
}: {
  params: { [prop: string]: string[] };
}) => {
  const { slug } = params;
  const {pageData, error} = getPageData(slug)

  return {
    props: {
      pageData: page || null,
      error: error || null,
    },
  };
};

export default Page;

错误页面与文档中的页面相同：

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

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

export default Error;

这是可行的，但状态码是错误的。Nextjs仍然用状态码200来响应对该页面的请求。我需要它将状态码设置为500，就像有服务器错误一样。

next.js

来源：https://stackoverflow.com/questions/70712833/nextjs-custom-error-page-with-correct-status-code

1条答案

按热度按时间

oxf4rvwz1#

如果您使用“getServerSideProps”或“getStaticProps”，则可以更改页面状态代码，您只需要在返回页面属性之前更改响应状态代码：

const HomePage = ({pageProps}) => {

 if (pageProps.hasError) {
     return <CustomError status={error.status} message={error.message}/>
 }

 return <div>This is home page </div>

 }

 export const getServerSideProps = async ({req,res}) => {

 try {
     const homeData = await fetchHomeData()

     return {
         props: {
             data: homeData
         }
     }

 } catch (err) {

     res.statusCode = exception.response.status  /* this is the key part */

     return {
         props: {
             hasError: true, error: {
                 status: exception.response.status || 500,
                 message: exception.message
             }
         }
     }
 }
}

赞(0）回复(0）举报 2022-12-18

我来回答

next.js 带有正确状态码的自定义错误页面

1条答案

相关问题

热门标签

最新问答