introduction

自定义错误页面

404 页面

一个404 页面可能会经常访问,服务端渲染一个错误页面(会增加Next.js 服务器的负担),并且将导致消耗大量的时间并降低用户体验 …

为了避免上面的缺陷,Next.js 提供了一个静态的404页面(无需增加额外的文件)

自定义404页面

为了创建一个自定义的404页面(你能够创建一个pages/404.js),这个页面在构建时静态生成 …

  1. // pages/404.js
  2. export default function Custom404() {
  3.   return <h1>404 - Page Not Found</h1>
  4. }

同样,你能够在这个错误页面中使用getStaticProps,如果你需要在构建时进行数据抓取)

500 页面

一个错误页面的服务端渲染(对于每个用户来说增加了复杂性),为了帮助用户更快的获取到错误的响应,Next.js 提供了一个静态的500错误页面(默认不需要增加额外的文件) …

自定义500 页面

为了自定义500 页面,你能够创建一个pages/500.js文件,这个文件在构建时期静态生成 …

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

你能够在页面中使用getStaticProps,如果你需要在构建时进行数据抓取 ..

更高级的错误页面自定义

500 错误能够通过在客户端或者服务端通过Error组件处理,如果你希望进行覆盖,定义页面pages/_error.js并增加如下代码

  1. function Error({ statusCode }) {
  2.   return (
  3.     <p>
  4.       {statusCode
  5.         ? `An error ${statusCode} occurred on server`
  6.         : 'An error occurred on client'}
  7.     </p>
  8.   )
  9. }
  11. Error.getInitialProps = ({ res, err }) => {
  12.   const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  13.   return { statusCode }
  14. }
  16. export default Error

pages/_error.js将仅仅使用在生产环境,在开发环境中(你将得到错误的调用堆栈,直到你的错误来自哪里)

重用内置错误页面

如果你想要渲染内置的错误页面,你能够导入Error组件

  1. import Error from 'next/error'
  3. export async function getServerSideProps() {
  4.   const res = await fetch('https://api.github.com/repos/vercel/next.js')
  5.   const errorCode = res.ok ? false : res.statusCode
  6.   const json = await res.json()
  8.   return {
  9.     props: { errorCode, stars: json.stargazers_count },
  10.   }
  11. }
  13. export default function Page({ errorCode, stars }) {
  14.   if (errorCode) {
  15.     return <Error statusCode={errorCode} />
  16.   }
  18.   return <div>Next stars: {stars}</div>
  19. }

Error组件也能获取title作为一个属性(如果你想要传递文本消息以及 状态码) …

如果你有一个自定义的Error组件确保导入自定义的错误组件,next/error导出的是由Next.js 自己使用的组件 …