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使用的默认组件。