时间戳

首页 > 解决方案 > 在 NextJs 中使用 statusCode 抛出错误以测试自定义的错误页面

reactjs - 在 NextJs 中使用 statusCode 抛出错误以测试自定义的错误页面

问题描述

所以我建立了一个自定义错误页面，以允许国际化。这工作正常。不过，我测试它的唯一方法是输入胡言乱语作为路线。例如：localhost:<port>/gibberish

所以它会将我重定向到自定义错误页面。我一直在尝试创建一个名为errortestand 在该页面内的页面，我想用给定的 statusCode 抛出一个错误，因此 NextJs 捕获它并重定向到自定义错误页面。

问题是，我不知道该怎么做。

沿着这个：

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

export default ErrorTest;

标签： reactjsnext.jsi18next

解决方案

我也遇到了这个问题，我认为最简单的方法是将_error.js页面导入另一个测试页面并使用您选择的状态代码呈现它。您可以在此处的 Next.js 文档中找到它。您将找到的代码示例如下所示：

import Error from 'next/error'

export async function getServerSideProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const errorCode = res.ok ? false : res.statusCode
  const json = await res.json()

  return {
    props: { errorCode, stars: json.stargazers_count },
  }
}

// Note the page returns your custom error page
export default function Page({ errorCode, stars }) {
  if (errorCode) {
    return <Error statusCode={errorCode} />
  }

  return <div>Next stars: {stars}</div>
}

您可以将自定义错误页面导入另一个页面并在那里进行修改，而无需运行yarn build和yarn start. 如果您想更新样式或修复开发过程中可能出现的任何问题（例如本地化），这将特别有用。

推荐阅读