{"id":14991060,"url":"https://github.com/ryanhefner/next-contentful","last_synced_at":"2025-10-04T06:04:53.494Z","repository":{"id":73826733,"uuid":"175649117","full_name":"ryanhefner/next-contentful","owner":"ryanhefner","description":"📰 React library for integrating react-contentful into the server-side rendering of your Next.js app.","archived":false,"fork":false,"pushed_at":"2023-07-13T13:27:21.000Z","size":595,"stargazers_count":20,"open_issues_count":2,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T23:01:52.997Z","etag":null,"topics":["contentful","contentful-api","contentful-js-sdk","nextjs","react","reactjs","ssr"],"latest_commit_sha":null,"homepage":"https://www.pkgstats.com/pkg:next-contentful","language":"JavaScript","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/ryanhefner.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ryanhefner","patreon":"ryanhefner","open_collective":"ryanhefner","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-03-14T15:26:27.000Z","updated_at":"2024-11-07T05:31:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"ecfef46e-aea9-43e5-96de-2daf0e73aa5b","html_url":"https://github.com/ryanhefner/next-contentful","commit_stats":{"total_commits":68,"total_committers":2,"mean_commits":34.0,"dds":0.05882352941176472,"last_synced_commit":"3657f1c128f4e98fe82f5851f7c827065b2b070c"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Fnext-contentful","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Fnext-contentful/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Fnext-contentful/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Fnext-contentful/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanhefner","download_url":"https://codeload.github.com/ryanhefner/next-contentful/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248511129,"owners_count":21116357,"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":["contentful","contentful-api","contentful-js-sdk","nextjs","react","reactjs","ssr"],"created_at":"2024-09-24T14:21:23.904Z","updated_at":"2025-10-04T06:04:46.026Z","avatar_url":"https://github.com/ryanhefner.png","language":"JavaScript","funding_links":["https://github.com/sponsors/ryanhefner","https://patreon.com/ryanhefner","https://opencollective.com/ryanhefner"],"categories":[],"sub_categories":[],"readme":"# Next Contentful\n\n[![npm](https://img.shields.io/npm/v/next-contentful?style=flat-square)](https://www.npmjs.com/package/next-contentful)\n[![NPM](https://img.shields.io/npm/l/next-contentful?style=flat-square)](LICENSE)\n[![npm](https://img.shields.io/npm/dt/next-contentful?style=flat-square)](https://www.npmjs.com/package/next-contentful)\n\nReact library for integrating [`react-contentful`](https://github.com/ryanhefner/react-contentful)\ninto the server-side rendering of your Next.js app.\n\n## Install\n\nVia [npm](https://npmjs.com/package/next-contentful)\n```sh\nnpm install --save next-contentful\n```\n\nVia [Yarn](https://yarn.fyi/next-contentful)\n```sh\nyarn add next-contentful\n```\n\n## How to use\n\nTo use `next-contentful`, just set the parameters that will be used by the\n`ContentfulClient` from [`react-contentful`](https://github.com/ryanhefner/react-contentful)\nand wraps your Next.js app in a `ContentfulProvider` and handles initiating both\nthe `ContentfulClient` for both SSR/requests and the browser client.\n\nAny `Query` instance that appear in your React tree will be queued and requested\nserver-side and included in the initial state to make reduce the requests being\nmade by the client and results in your Next/React app rendering faster client-side.\n\nHere’s an example of how it is used:\n\n```js\nimport App, { Container } from 'next/app';\nimport React from 'react';\nimport { withContentful } from 'next-contentful';\n\n// Contentful config properties\nconst space = '[CONTENTFUL SPACE]';\nconst accessToken = '[CONTENTFUL ACCESS TOKEN]';\nconst host = 'cdn.contentful.com';\nconst locale = 'es-US';\n\nclass MyApp extends App {\n  static async getInitialProps({ Component, ctx, router }) {\n    let pageProps = {};\n\n    if (Component.getInitialProps) {\n      pageProps = await Component.getInitialProps({ ctx });\n    }\n\n    return { pageProps };\n  }\n\n  render() {\n    const {\n      Component,\n      pageProps,\n      store,\n    } = this.props;\n\n    return (\n      \u003cContainer\u003e\n        \u003cComponent {...pageProps} /\u003e\n      \u003c/Container\u003e\n    );\n  }\n}\n\nexport default withContentful({\n  space,\n  accessToken,\n  host,         // Optional: Defaults to 'cdn.contentful.com'\n  locale,       // Optional: Defaults to `en-US`\n})(MyApp);\n\n```\n\n### `withContentful`\n\nHigher-order component that makes it easy to quickly add Contentful support to your Next.js application by providing the setup to that allows [`react-contentful`](https://github.com/ryanhefner/react-contentful) components to be rendered both server-side and client-side within your React applications.\n\n#### Options\n\n* `space: string` - ID of the Contentful space you are working with\n\n* `accessToken: string` - Contentful access token used to access the space\n\n* `locale: string` - Default locale to apply to queries (Note: This can be overriden with locales set on the individual queries).\n\n* `host: string` - Host to use for the Contentful requests. Defaults to `cdn.contentful.com`, but could be set to `preview.contentful.com` when used with a preview token.\n\n* `environment: string` – Environment value to use for Contentful requests. Defaults to `master`.\n\n## License\n\n[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Fnext-contentful","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanhefner%2Fnext-contentful","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Fnext-contentful/lists"}