自定义错误页面

404 页面

404 页面可能会被频繁访问。每次访问都进行服务端渲染会增加 Next.js 服务器的负载，可能导致成本上升和体验变慢。

为避免上述问题，Next.js 默认提供了静态 404 页面，无需添加任何额外文件。

自定义 404 页面

要创建自定义 404 页面，可以创建 pages/404.js 文件。该文件会在构建时静态生成。

pages/404.js

export default function Custom404() {
  return <h1>404 - 页面未找到</h1>
}

须知：如果需要在构建时获取数据，可以在该页面中使用 getStaticProps。

500 页面

每次访问都进行服务端渲染的错误页面会增加错误响应的复杂性。为了帮助用户尽快获得错误响应，Next.js 默认提供了静态 500 页面，无需添加任何额外文件。

自定义 500 页面

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

pages/500.js

export default function Custom500() {
  return <h1>500 - 服务器端发生错误</h1>
}

须知：如果需要在构建时获取数据，可以在该页面中使用 getStaticProps。

更高级的错误页面自定义

500 错误由 Error 组件在客户端和服务端同时处理。如需覆盖默认行为，可定义 pages/_error.js 文件并添加以下代码：

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `服务器发生 ${statusCode} 错误`
        : '客户端发生错误'}
    </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.js 星标数: {stars}</div>
}

Error 组件还接受 title 属性，您可以在传递 statusCode 的同时附加文本消息。

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

注意事项

Error 组件目前不支持 Next.js 的数据获取方法，如 getStaticProps 或 getServerSideProps。
与 _app 类似，_error 是保留路径名。_error 用于定义错误页面的自定义布局和行为。当直接通过路由访问或在自定义服务器中渲染时，/_error 会显示 404 页面。