Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryanhefner/next-contentful
📰 React library for integrating react-contentful into the server-side rendering of your Next.js app.
https://github.com/ryanhefner/next-contentful
contentful contentful-api contentful-js-sdk nextjs react reactjs ssr
Last synced: 4 months ago
JSON representation
📰 React library for integrating react-contentful into the server-side rendering of your Next.js app.
- Host: GitHub
- URL: https://github.com/ryanhefner/next-contentful
- Owner: ryanhefner
- License: mit
- Created: 2019-03-14T15:26:27.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-13T13:27:21.000Z (over 1 year ago)
- Last Synced: 2024-10-01T03:24:06.911Z (4 months ago)
- Topics: contentful, contentful-api, contentful-js-sdk, nextjs, react, reactjs, ssr
- Language: JavaScript
- Homepage: https://www.pkgstats.com/pkg:next-contentful
- Size: 581 KB
- Stars: 19
- Watchers: 3
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Next Contentful
[](https://www.npmjs.com/package/next-contentful)
[](LICENSE)
[](https://www.npmjs.com/package/next-contentful)
React library for integrating [`react-contentful`](https://github.com/ryanhefner/react-contentful)
into the server-side rendering of your Next.js app.
## Install
Via [npm](https://npmjs.com/package/next-contentful)
```sh
npm install --save next-contentful
```
Via [Yarn](https://yarn.fyi/next-contentful)
```sh
yarn add next-contentful
```
## How to use
To use `next-contentful`, just set the parameters that will be used by the
`ContentfulClient` from [`react-contentful`](https://github.com/ryanhefner/react-contentful)
and wraps your Next.js app in a `ContentfulProvider` and handles initiating both
the `ContentfulClient` for both SSR/requests and the browser client.
Any `Query` instance that appear in your React tree will be queued and requested
server-side and included in the initial state to make reduce the requests being
made by the client and results in your Next/React app rendering faster client-side.
Here’s an example of how it is used:
```js
import App, { Container } from 'next/app';
import React from 'react';
import { withContentful } from 'next-contentful';
// Contentful config properties
const space = '[CONTENTFUL SPACE]';
const accessToken = '[CONTENTFUL ACCESS TOKEN]';
const host = 'cdn.contentful.com';
const locale = 'es-US';
class MyApp extends App {
static async getInitialProps({ Component, ctx, router }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps({ ctx });
}
return { pageProps };
}
render() {
const {
Component,
pageProps,
store,
} = this.props;
return (
);
}
}
export default withContentful({
space,
accessToken,
host, // Optional: Defaults to 'cdn.contentful.com'
locale, // Optional: Defaults to `en-US`
})(MyApp);
```
### `withContentful`
Higher-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.
#### Options
* `space: string` - ID of the Contentful space you are working with
* `accessToken: string` - Contentful access token used to access the space
* `locale: string` - Default locale to apply to queries (Note: This can be overriden with locales set on the individual queries).
* `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.
* `environment: string` – Environment value to use for Contentful requests. Defaults to `master`.
## License
[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)