在NextJs中使用statusCode引发错误以测试自定义错误页面

Question

因此，我建立了一个自定义错误页面，以允许国际化。一切正常。我要测试它的唯一方法是输入乱码作为路径。例如：localhost:<port>/gibberish

这样它将把我重定向到自定义错误页面。我一直在尝试创建一个名为errortest的页面，并且在该页面内，我想使用给定的statusCode引发错误，因此NextJs会捕获该错误并将其重定向到自定义错误页面。

是，我不知道该怎么做。

与此类似：

const ErrorTest = () => {
  //Throw Error
};

export default ErrorTest;

Answer 1

您无需创建自定义错误页面或重定向到错误页面，只需在页面出现错误时从<Error />返回next/error

import React from 'react';
import { NextPage } from 'next';
import Error from 'next/error';

interface PageProps {
    title: string;
    responseStatus?: number;
}

const Test: NextPage<PageProps> = ({ responseStatus }) => {
    if (responseStatus) {
        return <div>Success</div>;
    } else {
        return <Error statusCode={responseStatus} />;
    }
};

Test.getInitialProps = async () => {
    let responseStatus = null;
    fetch('YOUR_API')
        .then(response => response.json())
        .then()
        .catch(error => {
            responseStatus = error.status;
        });
    if (responseStatus) {
        return {
            title: 'Test',
            responseStatus: responseStatus,
        };
    }

    return {
        title: 'Test',
    };
};
export default Test;