跳至内容
构建您的应用程序路由自定义错误

自定义错误

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 默认提供了一个静态 500 页面，无需添加任何其他文件。

自定义 500 页面

要自定义 500 页面，您可以创建一个 pages/500.js 文件。此文件在构建时会静态生成。

pages/500.js
export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>
}

**值得注意的是**：如果您需要在构建时获取数据，则可以在此页面内使用 getStaticProps。

更高级的错误页面自定义

500 错误由 Error 组件在客户端和服务器端都进行处理。如果您希望覆盖它，请定义文件 pages/_error.js 并添加以下代码

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

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.status
  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>
}

如果要传递文本消息以及 statusCode，则 Error 组件也接受 title 作为属性。

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

注意事项