Skip to main content

自定义错误

404 页面​

¥404 Page

404 页面可能会被频繁访问。服务器为每次访问渲染错误页面会增加 Next.js 服务器的负载。这可能会导致成本增加和体验缓慢。

¥A 404 page may be accessed very often. Server-rendering an error page for every visit increases the load of the Next.js server. This can result in increased costs and slow experiences.

为了避免上述陷阱，Next.js 默认提供静态 404 页面，无需添加任何其他文件。

¥To avoid the above pitfalls, Next.js provides a static 404 page by default without having to add any additional files.

自定义 404 页面​

¥Customizing The 404 Page

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

¥To create a custom 404 page you can create a pages/404.js file. This file is statically generated at build time.

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

很高兴知道：如果你需要在构建时获取数据，你可以在此页面中使用 getStaticProps。

¥Good to know: You can use getStaticProps inside this page if you need to fetch data at build time.

500 页面​

¥500 Page

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

¥Server-rendering an error page for every visit adds complexity to responding to errors. To help users get responses to errors as fast as possible, Next.js provides a static 500 page by default without having to add any additional files.

自定义 500 页面​

¥Customizing The 500 Page

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

¥To customize the 500 page you can create a pages/500.js file. This file is statically generated at build time.

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

很高兴知道：如果你需要在构建时获取数据，你可以在此页面中使用 getStaticProps。

¥Good to know: You can use getStaticProps inside this page if you need to fetch data at build time.

更高级的错误页面定制​

¥More Advanced Error Page Customizing

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

¥500 errors are handled both client-side and server-side by the Error component. If you wish to override it, define the file pages/_error.js and add the following code:

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 仅用于生产。在开发过程中，你会在调用堆栈中收到错误，以了解错误的来源。

¥pages/_error.js is only used in production. In development you’ll get an error with the call stack to know where the error originated from.

重用内置错误页面​

¥Reusing the built-in error page

如果你想渲染内置错误页面，你可以导入 Error 组件：

¥If you want to render the built-in error page you can by importing the Error component:

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 作为属性。

¥The Error component also takes title as a property if you want to pass in a text message along with a statusCode.

如果你有自定义 Error 组件，请务必导入该组件。next/error 导出 Next.js 使用的默认组件。

¥If you have a custom Error component be sure to import that one instead. next/error exports the default component used by Next.js.

注意事项​

¥Caveats