{"id":17974287,"url":"https://github.com/martpie/next-with-error","last_synced_at":"2025-03-25T14:32:04.497Z","repository":{"id":54558602,"uuid":"186410109","full_name":"martpie/next-with-error","owner":"martpie","description":"Next.js plugin to render the Error page and send the correct HTTP status code from any page","archived":false,"fork":false,"pushed_at":"2021-02-10T15:42:02.000Z","size":502,"stargazers_count":29,"open_issues_count":4,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-14T03:42:59.632Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/martpie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["martpie"]}},"created_at":"2019-05-13T11:53:53.000Z","updated_at":"2024-05-16T17:57:31.000Z","dependencies_parsed_at":"2022-08-13T19:40:23.223Z","dependency_job_id":null,"html_url":"https://github.com/martpie/next-with-error","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martpie%2Fnext-with-error","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martpie%2Fnext-with-error/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martpie%2Fnext-with-error/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martpie%2Fnext-with-error/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/martpie","download_url":"https://codeload.github.com/martpie/next-with-error/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245356248,"owners_count":20601886,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-29T17:07:46.274Z","updated_at":"2025-03-25T14:32:04.171Z","avatar_url":"https://github.com/martpie.png","language":"TypeScript","funding_links":["https://github.com/sponsors/martpie"],"categories":[],"sub_categories":[],"readme":"# `next-with-error`\n\n[![Build Status](https://img.shields.io/circleci/project/github/martpie/next-with-error.svg)](https://circleci.com/gh/martpie/next-with-error)\n![Dependencies](https://img.shields.io/david/martpie/next-with-error)\n\nNext.js plugin to render the Error page and send the correct HTTP status code from any page's `getInitialProps`.\n\nThis higher-order-components allows you to easily return Next.js's Error page + the correct HTTP status code just by defining `error.statusCode` in your pages `getInitialProps`:\n\n```jsx\n// pages/something.js\n\nconst SomePage = () =\u003e (\n  \u003ch1\u003eI will only render if error.statusCode is lesser than 400\u003c/h1\u003e\n);\n\nSomePage.getInitialProps = async () =\u003e {\n  const isAuthenticated = await getUser();\n\n  if (!isAuthenticated) {\n    return {\n      error: {\n        statusCode: 401\n      }\n    };\n  }\n\n  return {\n    // ...\n  };\n};\n```\n\nContents:\n\n\u003c!-- TOC depthfrom:2 --\u003e\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [`withError([ErrorPage])(App)`](#witherrorerrorpageapp)\n  - [`generatePageError(statusCode[, additionalProps])`](#generatepageerrorstatuscode-additionalprops)\n  - [Custom error page](#custom-error-page)\n  - [Custom props](#custom-props)\n- [Automatic Static Optimization](#automatic-static-optimization)\n\n\u003c!-- /TOC --\u003e\n\n## Installation\n\n```bash\nnpm install next-with-error\n```\n\n## Usage\n\n### `withError([ErrorPage])(App)`\n\nAdapt `pages/_app.js` so it looks similar to [what is described in the official Next.js documentation](https://nextjs.org/docs#custom-app) and add the `withError` HoC.\n\n\u003cdetails\u003e\n \u003csummary\u003eExample\u003c/summary\u003e\n\n```jsx\n// _app.jsx\nimport withError from 'next-with-error';\n\nclass MyApp extends App {\n  render() {\n    const { Component, pageProps } = this.props;\n    return \u003cComponent {...pageProps} /\u003e;\n  }\n}\n\nexport default withError()(MyApp);\n```\n\n\u003c/details\u003e\n\nThen, in any of your pages, define `error.statusCode` if needed in your page's `getInitialProps`\n\n```jsx\n// pages/article.js\nimport React from 'react';\nimport fetchPost from '../util/fetch-post';\n\nclass ArticlePage extends React.Component {\n  static async getInitialProps() {\n    const article = await fetchPost();\n\n    if (!article) {\n      // No article found, let's display a \"not found\" page\n      // Will return a 404 status code + display the Error page\n      return {\n        error: {\n          statusCode: 404\n        }\n      };\n    }\n\n    // Otherwise, all good\n    return {\n      article\n    };\n  }\n\n  render() {\n    return (\n      \u003ch1\u003e{this.props.article.title}\u003c/h1\u003e\n      // ...\n    );\n  }\n}\n\nexport default HomePage;\n```\n\n### `generatePageError(statusCode[, additionalProps])`\n\nIf you find the code to write the error object is a bit verbose, feel free to use the `generatePageError` helper:\n\n```jsx\nimport { generatePageError } from 'next-with-error';\n\n// ...\n\nSomePage.getInitialProps = async () =\u003e {\n  const isAuthenticated = await getUser();\n\n  if (!isAuthenticated) {\n    return generatePageError(401);\n  }\n\n  return {};\n};\n```\n\nYou can use the `additionalProps` argument to pass [custom props to the Error component](#custom-props).\n\n### Custom error page\n\nBy default, `withError` will display the default Next.js error page. If you need to display your own error page, you will need to pass it as the first parameter of your HoC:\n\n```jsx\nimport Error from './_error';\n// ...\n\nexport default withError(ErrorPage)(MyApp);\n```\n\nWork to automate this [is tracked here](https://github.com/martpie/next-with-error/issues/2).\n\nThe error object properties are accessible via the `props` of your custom Error component (`props.statusCode`, `props.message`, etc if you have custom props).\n\n⚠️ If your custom Error page has a `getInitialProps` method, the error object will be merged in `getInitialProps`'s return value. Be careful to not have conflicting names.\n\n### Custom props\n\nYou can also pass custom props to your Error Page component by adding anything you would like in the `error` object:\n\n```jsx\n// /pages/article.js\nconst HomePage = () =\u003e \u003ch1\u003eHello there!\u003c/h1\u003e;\n\nHomePage.getInitialProps = () =\u003e {\n  return {\n    error: {\n      statusCode: 401,\n      message: 'oopsie'\n    }\n  };\n};\n\nexport default HomePage;\n```\n\n```jsx\n// /pages/_error.js\n\nimport React from 'react';\n\nconst Error = (props) =\u003e {\n  return (\n    \u003c\u003e\n      \u003ch1\u003eCustom error page: {props.error.statusCode}\u003c/h1\u003e\n      \u003cp\u003e{props.error.message}\u003c/p\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default Error;\n```\n\n⚠️ Be careful to add default values for your custom props in the `Error` component, as Next.js routing may bypass `next-with-error`'s behavior by showing the 404 page without the `message` variable (in this example).\n\n## Automatic Static Optimization\n\n\u003e You have opted-out of Automatic Static Optimization due to `getInitialProps` in `pages/_app`\n\nThis plugin, like most Higher-order-Component relying on extending the `_app` file, will opt-you-out of the Automatic Static Optimization of Next.js. This is a known trade-off to avoid declaring this HoC on each one of your pages.\n\nThings will probably change [once Next.js support for plugins will ship](https://github.com/zeit/next.js/issues/9133).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartpie%2Fnext-with-error","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartpie%2Fnext-with-error","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartpie%2Fnext-with-error/lists"}