next.js 中文文档

主题

404 页面 ​

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

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

自定义404页面 ​

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

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

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

500 页面 ​

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

自定义500页面 ​

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

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

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

更高级的错误页面自定义 ​

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

jsx
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组件来实现：

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

Error组件还可以接受title作为属性，如果您想传递文本消息以及statusCode。

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

注意事项 ​