* Add docs for static 404 and pages/404 * Remove new from docs * Apply suggestions from code review Co-Authored-By: Shu Uesugi <shu@chibicode.com> * Rework using suggestions from review * Apply suggestions from code review Co-Authored-By: Shu Uesugi <shu@chibicode.com> * Update custom-error-page.md * Update custom-error-page.md * Update custom-error-page.md * Fix prettier Co-authored-by: Shu Uesugi <shu@chibicode.com> Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
2.3 KiB
description |
---|
Override and extend the built-in Error page to handle custom errors. |
404 Page
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.
// pages/404.js
export default function Custom404() {
return <h1>404 - Page Not Found</h1>
}
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:
function Error({ statusCode }) {
return (
<p>
{statusCode
? `An error ${statusCode} occurred on server`
: 'An error occurred on client'}
</p>
)
}
Error.getInitialProps = ({ res, err }) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404
return { statusCode }
}
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.
Reusing the built-in error page
If you want to render the built-in error page you can by importing the Error
component:
import Error from 'next/error'
import fetch from 'isomorphic-unfetch'
const Page = ({ errorCode, stars }) => {
if (errorCode) {
return <Error statusCode={errorCode} />
}
return <div>Next stars: {stars}</div>
}
Page.getInitialProps = async () => {
const res = await fetch('https://api.github.com/repos/zeit/next.js')
const errorCode = res.statusCode > 200 ? res.statusCode : false
const json = await res.json()
return { errorCode, stars: json.stargazers_count }
}
export default Page
The Error
component also takes title
as a property if you want to pass in a text message along with a statusCode
.