diff --git a/docs/advanced-features/custom-error-page.md b/docs/advanced-features/custom-error-page.md index 828ecf789a23606..24851e8df4014ee 100644 --- a/docs/advanced-features/custom-error-page.md +++ b/docs/advanced-features/custom-error-page.md @@ -2,9 +2,30 @@ description: Override and extend the built-in Error page to handle custom errors. --- -# Custom Error Page +## 404 Page -**404** or **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: +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. + +To avoid the above pitfalls, Next.js provides a static 404 page by default without having to add any additional files. + +### Customizing The 404 Page + +To create a custom 404 page you can create a `pages/404.js` file. This file is statically generated at build time. + +```jsx +// pages/404.js +export default function Custom404() { + return

404 - Page Not Found

+} +``` + +## 500 Page + +By default Next.js provides a 500 error page that matches the default 404 page’s style. This page is not statically optimized as it allows server-side errors to be reported. This is why 404 and 500 (other errors) are separated. + +### Customizing The Error Page + +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: ```jsx function Error({ statusCode }) { @@ -25,9 +46,9 @@ Error.getInitialProps = ({ res, err }) => { export default Error ``` -> `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. +> `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 +### Reusing the built-in error page If you want to render the built-in error page you can by importing the `Error` component: