{body}
\n \n );\n}\n\nexport default Component;\n```\n\n## Why?\n\nThe primary mechanism Next.js provides for static data is `getStaticProps` — which is a great feature and is the right tool for many use cases. However, there are other use cases for static data that are not covered by `getStaticProps`.\n\n- **Site-wide data**: if you have static data that's required across many different pages, `getStaticProps` is a somewhat awkward mechanism because for each new page, you'll have to re-fetch that same static data. For example, if you use `getStaticProps` to fetch content for your header, that data will be re-fetched on every page change.\n- **Static data for API routes**: It can be useful to pre-evaluate data fetches in API routes to speed up response times and offload work from your database. `getStaticProps` does not work for API routes while `next-plugin-preval` does.\n- **De-duped and code split data**: Since `next-plugin-preval` behaves like importing JSON, you can leverage the optimizations bundlers have for importing standard static assets. This includes standard code-splitting and de-duping.\n- **Zero runtime**: Preval files don't get sent to the browser, only their outputted JSON.\n\nSee the [recipes](#recipes) for concrete examples.\n\n## Installation\n\n### Install\n\n```\nyarn add next-plugin-preval\n```\n\nor\n\n```\nnpm i next-plugin-preval\n```\n\n### Add to next.config.js\n\n```js\n// next.config.js\nconst createNextPluginPreval = require('next-plugin-preval/config');\nconst withNextPluginPreval = createNextPluginPreval();\n\nmodule.exports = withNextPluginPreval(/* optionally add a next.js config */);\n```\n\n## Usage\n\nCreate a file with the extension `.preval.ts` or `.preval.js` then export a promise wrapped in `preval()`.\n\n```js\n// my-data.preval.js\nimport preval from 'next-plugin-preval';\n\nasync function getData() {\n return { hello: 'world'; }\n}\n\nexport default preval(getData());\n```\n\nThen import that file anywhere. The result of the promise is returned.\n\n```js\n// component.js (or any file)\nimport myData from './my-data.preval'; // 👈 this is effectively like importing JSON\n\nfunction Component() {\n return (\n{JSON.stringify(myData, null, 2)}\n