Next.js 中文网

主题

自定义错误 ​

¥Custom Errors

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.

需要了解：如果你需要在构建时获取数据，你可以在此页面中使用 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.

需要了解：如果你需要在构建时获取数据，你可以在此页面中使用 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:

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:

如果你想将文本消息与 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