{"pageProps":{"routes":[{"title":"Documentation","heading":true,"routes":[{"title":"Getting Started","path":"/docs/getting-started.md"},{"title":"Basic Features","open":true,"routes":[{"title":"Pages","path":"/docs/basic-features/pages.md"},{"title":"Data fetching","path":"/docs/basic-features/data-fetching.md"},{"title":"Built-in CSS Support","path":"/docs/basic-features/built-in-css-support.md"},{"title":"Static File Serving","path":"/docs/basic-features/static-file-serving.md"},{"title":"TypeScript","path":"/docs/basic-features/typescript.md"},{"title":"Environment Variables","path":"/docs/basic-features/environment-variables.md"}]},{"title":"Routing","routes":[{"title":"Introduction","path":"/docs/routing/introduction.md"},{"title":"Dynamic Routes","path":"/docs/routing/dynamic-routes.md"},{"title":"Imperatively","path":"/docs/routing/imperatively.md"},{"title":"Shallow Routing","path":"/docs/routing/shallow-routing.md"}]},{"title":"API Routes","routes":[{"title":"Introduction","path":"/docs/api-routes/introduction.md"},{"title":"Dynamic API Routes","path":"/docs/api-routes/dynamic-api-routes.md"},{"title":"API Middlewares","path":"/docs/api-routes/api-middlewares.md"},{"title":"Response Helpers","path":"/docs/api-routes/response-helpers.md"}]},{"title":"Deployment","path":"/docs/deployment.md"},{"title":"Advanced Features","routes":[{"title":"Preview Mode","path":"/docs/advanced-features/preview-mode.md"},{"title":"Dynamic Import","path":"/docs/advanced-features/dynamic-import.md"},{"title":"Automatic Static Optimization","path":"/docs/advanced-features/automatic-static-optimization.md"},{"title":"Static HTML Export","path":"/docs/advanced-features/static-html-export.md"},{"title":"Absolute Imports and Module Path Aliases","path":"/docs/advanced-features/module-path-aliases.md"},{"title":"AMP Support","routes":[{"title":"Introduction","path":"/docs/advanced-features/amp-support/introduction.md"},{"title":"Adding AMP Components","path":"/docs/advanced-features/amp-support/adding-amp-components.md"},{"title":"AMP Validation","path":"/docs/advanced-features/amp-support/amp-validation.md"},{"title":"AMP in Static HTML export","path":"/docs/advanced-features/amp-support/amp-in-static-html-export.md"},{"title":"TypeScript","path":"/docs/advanced-features/amp-support/typescript.md"}]},{"title":"Customizing Babel Config","path":"/docs/advanced-features/customizing-babel-config.md"},{"title":"Customizing PostCSS Config","path":"/docs/advanced-features/customizing-postcss-config.md"},{"title":"Custom Server","path":"/docs/advanced-features/custom-server.md"},{"title":"Custom `App`","path":"/docs/advanced-features/custom-app.md"},{"title":"Custom `Document`","path":"/docs/advanced-features/custom-document.md"},{"title":"Custom Error Page","path":"/docs/advanced-features/custom-error-page.md"},{"title":"`src` Directory","path":"/docs/advanced-features/src-directory.md"},{"title":"Multi Zones","path":"/docs/advanced-features/multi-zones.md"},{"title":"Measuring performance","path":"/docs/advanced-features/measuring-performance.md"}]},{"title":"Upgrade Guide","path":"/docs/upgrading.md"},{"title":"FAQ","path":"/docs/faq.md"}]},{"title":"API Reference","heading":true,"routes":[{"title":"CLI","path":"/docs/api-reference/cli.md"},{"title":"next/router","path":"/docs/api-reference/next/router.md"},{"title":"next/link","path":"/docs/api-reference/next/link.md"},{"title":"next/head","path":"/docs/api-reference/next/head.md"},{"title":"next/amp","path":"/docs/api-reference/next/amp.md"},{"title":"Data Fetching","routes":[{"title":"getInitialProps","path":"/docs/api-reference/data-fetching/getInitialProps.md"}]},{"title":"next.config.js","routes":[{"title":"Introduction","path":"/docs/api-reference/next.config.js/introduction.md"},{"title":"Environment Variables","path":"/docs/api-reference/next.config.js/environment-variables.md"},{"title":"Custom Page Extensions","path":"/docs/api-reference/next.config.js/custom-page-extensions.md"},{"title":"CDN Support with Asset Prefix","path":"/docs/api-reference/next.config.js/cdn-support-with-asset-prefix.md"},{"title":"Build Target","path":"/docs/api-reference/next.config.js/build-target.md"},{"title":"Custom Webpack Config","path":"/docs/api-reference/next.config.js/custom-webpack-config.md"},{"title":"Compression","path":"/docs/api-reference/next.config.js/compression.md"},{"title":"Static Optimization Indicator","path":"/docs/api-reference/next.config.js/static-optimization-indicator.md"},{"title":"Runtime Configuration","path":"/docs/api-reference/next.config.js/runtime-configuration.md"},{"title":"Disabling x-powered-by","path":"/docs/api-reference/next.config.js/disabling-x-powered-by.md"},{"title":"Disabling ETag Generation","path":"/docs/api-reference/next.config.js/disabling-etag-generation.md"},{"title":"Setting a custom build directory","path":"/docs/api-reference/next.config.js/setting-a-custom-build-directory.md"},{"title":"Configuring the Build ID","path":"/docs/api-reference/next.config.js/configuring-the-build-id.md"},{"title":"Configuring onDemandEntries","path":"/docs/api-reference/next.config.js/configuring-onDemandEntries.md"},{"title":"Ignoring TypeScript Errors","path":"/docs/api-reference/next.config.js/ignoring-typescript-errors.md"},{"title":"exportPathMap","path":"/docs/api-reference/next.config.js/exportPathMap.md"}]}]}],"data":{"description":"Override and extend the built-in Error page to handle custom errors."},"route":{"title":"Custom Error Page","path":"/docs/advanced-features/custom-error-page.md"},"html":"

404 Page\n \n \n \n \n

\n

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.

\n

To avoid the above pitfalls, Next.js provides a static 404 page by default without having to add any additional files.

\n

Customizing The 404 Page\n \n \n \n \n

\n

To create a custom 404 page you can create a pages/404.js file. This file is statically generated at build time.

\n
// pages/404.js\nexport default function Custom404() {\n  return <h1>404 - Page Not Found</h1>\n}\n
\n

500 Page\n \n \n \n \n

\n

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.

\n

Customizing The Error Page\n \n \n \n \n

\n

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:

\n
function Error({ statusCode }) {\n  return (\n    <p>\n      {statusCode\n        ? `An error ${statusCode} occurred on server`\n        : 'An error occurred on client'}\n    </p>\n  )\n}\n\nError.getInitialProps = ({ res, err }) => {\n  const statusCode = res ? res.statusCode : err ? err.statusCode : 404\n  return { statusCode }\n}\n\nexport default Error\n
\n
\n

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.

\n
\n

Reusing the built-in error page\n \n \n \n \n

\n

If you want to render the built-in error page you can by importing the Error component:

\n
import Error from 'next/error'\n\nexport async function getServerSideProps() {\n  const res = await fetch('https://api.github.com/repos/zeit/next.js')\n  const errorCode = res.ok ? false : res.statusCode\n  const json = await res.json()\n\n  return {\n    props: { errorCode, stars: json.stargazers_count },\n  }\n}\n\nexport default function Page({ errorCode, stars }) {\n  if (errorCode) {\n    return <Error statusCode={errorCode} />\n  }\n\n  return <div>Next stars: {stars}</div>\n}\n
\n

The Error component also takes title as a property if you want to pass in a text message along with a statusCode.

"},"__N_SSG":true}