--- 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. ```jsx // pages/404.js export default function Custom404() { return
{statusCode ? `An error ${statusCode} occurred on server` : 'An error occurred on client'}
) } 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: ```jsx import Error from 'next/error' export async function getServerSideProps() { const res = await fetch('https://api.github.com/repos/zeit/next.js') const errorCode = res.ok ? false : res.statusCode const json = await res.json() return { props: { errorCode, stars: json.stargazers_count }, } } export default function Page({ errorCode, stars }) { if (errorCode) { return