Next.js高级特性:自定义错误页面

404页

404页面可能经常被访问。服务器为每次访问呈现一个错误页面会增加Next.js服务器的负载。这会导致成本增加和体验变慢。

为避免上述陷阱,默认情况下,Next.js提供了一个静态404页面,而无需添加任何其他文件。

自定义404页面

要创建自定义404页面,您可以创建一个pages/404.js文件。该文件在生成时静态生成。

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

注意getStaticProps如果需要在构建时获取数据,则可以在此页面内使用。

500页

默认情况下,Next.js提供与默认404页面样式匹配的500错误页面。此页面不是静态优化的页面,因为它允许报告服务器端错误。这就是为什么将404和500(其他错误)分开的原因。

自定义错误页面

Error组件可同时在客户端和服务器端处理500个错误。如果要覆盖它,请定义文件pages/_error.js并添加以下代码:

pages/_error.js仅用于生产。在开发中,您将在调用堆栈中看到一个错误,以了解错误的起源。

重用内置错误页面

如果要呈现内置错误页面,可以通过导入Error组件:

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 },
  }
}

export default function Page({ errorCode, stars }) {
  if (errorCode) {
    return <Error statusCode={errorCode} />
  }

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

如果您想将文本消息与一起传递,则该Error组件也将title作为属性statusCode

如果您有一个自定义Error组件,请确保导入该组件。next/error导出Next.js使用的默认组件。

作者:terry,如若转载,请注明出处:https://www.web176.com/nextjs/2422.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年4月20日 下午2:30
下一篇 2021年4月20日 下午2:36

相关推荐

发表回复

登录后才能评论