Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add documentation for new static 500 behavior #22888

Merged
merged 4 commits into from
Mar 9, 2021
Merged

Add documentation for new static 500 behavior #22888

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
243d344
Add documentation for new static 500 behavior
ijjk Mar 8, 2021
ba26e31
update page component name
ijjk Mar 8, 2021
02979aa
Update docs/advanced-features/custom-error-page.md
timneutkens Mar 9, 2021
80cbed0
Merge branch 'canary' into docs/500-page
kodiakhq[bot] Mar 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 15 additions & 2 deletions docs/advanced-features/custom-error-page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,22 @@ export default function Custom404() {

## 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.
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.

### Customizing The Error Page
### Customizing The 500 Page

To create a custom 500 page you can create a `pages/500.js` file. This file is statically generated at build time.
timneutkens marked this conversation as resolved.
Show resolved Hide resolved

```jsx
// pages/500.js
export default function Custom500() {
return <h1>500 - Server-side error occurred</h1>
}
```

> **Note**: You can use [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) inside this page if you need to fetch data at build time.

### More Advanced Error Page Customizing

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:

Expand Down