Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryanhefner/next-prismic
📰 React library for integrating @ryanhefner/react-prismic into the server-side rendering of your Next.js app.
https://github.com/ryanhefner/next-prismic
Last synced: 2 days ago
JSON representation
📰 React library for integrating @ryanhefner/react-prismic into the server-side rendering of your Next.js app.
- Host: GitHub
- URL: https://github.com/ryanhefner/next-prismic
- Owner: ryanhefner
- License: mit
- Created: 2019-08-14T21:21:49.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:08:42.000Z (over 1 year ago)
- Last Synced: 2024-08-29T13:21:17.287Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://www.pkgstats.com/pkg:@ryanhefner/next-prismic
- Size: 2.53 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# next-prismic
[](https://www.npmjs.com/package/@ryanhefner/next-prismic)
[](https://www.npmjs.com/package/@ryanhefner/next-prismic)
[](https://www.npmjs.com/package/@ryanhefner/next-prismic)
React library for integrating [`@ryanhefner/react-prismic`](https://npmjs.com/package/@ryanhefner/react-prismic)
into the server-side rendering of your [Next.js](https://nextjs.org) app.
## Install
Via [npm](https://npmjs.com/package/@ryanhefner/next-prismic)
```sh
npm install --save @ryanhefner/next-prismic
```
Via [Yarn](https://yarn.fyi/@ryanhefner/next-prismic)
```sh
yarn add @ryanhefner/next-prismic
```
## How to use
To use `next-prismic`, just set the parameters that will be used by the
`PrismicClient` from [`@ryanhefner/react-prismic`](https://github.com/ryanhefner/react-prismic)
and wraps your Next.js app in a `PrismicProvider` and handles initiating both
the `PrismicClient` for both SSR/requests and the browser client.
Any `PrismicQuery` 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 { withPrismic } from 'next-prismic';
// Prismic config properties
// This is name that is before `.prismic.io` when you are looking at your repo
// in Prismic. (ex. `your-repo.prismic.io`, the `repo` would be `your-repo`)
const repo = '[PRISMIC REPO PREFIX]';
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 withPrismic({
repo,
})(MyApp);
```
### `withPrismic`
Higher-order component that takes the options provided, wraps your app within
a `PrimicProvider` (from [`@ryanhefner/react-prismic`](https://github.com/ryanhefner/react-prismic))
and performs the necessary server-side rendering logic to deliver your React
app with all your Prismic data pre-requested/compiled into it.
#### Options
* `repo: string` - The name of the Prismic repo you plan on querying.
> This is name that is before `.prismic.io` when you are looking at your repo in Prismic.
> `repo` should be good for 94.6% of instances when using this class. If you want
> to get fancy, the following `props` are also available for you.
* `api: PrismicApi` - If you’re already initialzing an instance of the Prismic API outside of the `PrismicProvider`, you can pass that in to keep using that same one.
> If you have a reason to override the Prismic API witth your own logic, like
> hitting your own custom endpoint, it should be assumed that your instance of
> the Prismic API matches the interface of the original.
* `client: PrismicClient` - Client that will be used to make requests against Prismic.
* `cache: Cache | iterable | string` - Cache instance to initialize the `client` cache with.
## License
[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)