https://github.com/otterdev-io/next-sanity-extra
Make using next and sanity (with live preview) even easier
https://github.com/otterdev-io/next-sanity-extra
Last synced: 5 months ago
JSON representation
Make using next and sanity (with live preview) even easier
- Host: GitHub
- URL: https://github.com/otterdev-io/next-sanity-extra
- Owner: otterdev-io
- Created: 2021-01-10T18:41:12.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-05-27T05:58:33.000Z (about 4 years ago)
- Last Synced: 2025-10-01T17:43:52.977Z (10 months ago)
- Language: TypeScript
- Size: 213 KB
- Stars: 26
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# next-sanity-extra
This package aims to simplify integrating Next.js, and the Sanity.io CMS.
It gives you simple functions for setting up sanity, fetching static props, and using live previews as per https://www.sanity.io/blog/live-preview-with-nextjs
Checkout out the sanity starter template at https://github.com/otterdev-io/sanity-template-nextjs-vercel-extra to see an example of usage.
# Usage
First to setup the functions, create a module, eg `lib/sanity.js`. Call `setupNextSanity(config)` to get your helper functions:
```js
import { setupNextSanity } from "next-sanity-extra"
// Standard sanity config
// Don't forget token, to get a preview client and authenticated client
const config = {
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
useCdn: process.env.NODE_ENV === "production",
token: process.env.SANITY_API_TOKEN
};
export const {
sanityClient,
imageUrlBuilder,
PortableText,
sanityStaticProps,
useSanityQuery
} = setupNextSanity(config);
```
Then you can use the functions in a page, eg `pages/index.jsx`:
```tsx
import { sanityStaticProps, useSanityQuery, PortableText } from "../lib/sanity";
import groq from "next-sanity";
const myQuery = groq`*[ etc... ]`;
export const getStaticProps = async (context) => ({
props: await sanityStaticProps({context, query: myQuery})
});
export default function ServicesPage(props) {
const { data, loading, error } = useSanityQuery(query, props);
// Render page with data
{data.title}
}
```
## Preview API
To serve live previews, create eg `pages/api/preview.js`.
With the default settings - forwarding to /[slug]:
```js
import previewApi from 'next-sanity-extra/api/preview'
export default previewApi({token: process.env.SANITY_PREVIEW_TOKEN})
```
to forward to custom parameter - eg 'page'
```js
import previewApi from 'next-sanity-extra/api/preview'
export default previewApi({
token: process.env.SANITY_PREVIEW_TOKEN,
redirect: (req) => `/${req.query.page}`
});
```
## Functions
```js
import { setupNextSanity } from "next-sanity-extra"
```
`setupNextSanity(client: ClientConfig, serializers?: PortableTextSerializers)`
Returns an object with functions you can use to ease integration:
- `sanityClient('anonymous' | 'authenticated' | 'preview')` - A sanity client with a given setup. Token must be set in order to use authenticated or preview
- `imageUrlBuilder` - A ImageUrlBuilder
- `PortableText` - Portable Text component
- `sanityStaticProps({context, query, queryParams, authenticated})` - Returns static props for getStaticProps.
- `context` - the context passed into getStaticProps
- `query` - the query to run for the page.
- `queryParams` - [optional] params to substitute into the query. If not provided, will be taken from context.params.
- `authenticated` - [optional] whether to use an authenticated sanity client, if you have provided token to config. Defaults to false.
- `useSanityPreview(query, props)` - A hook which returns preview-enabled data for use in each page.
- `query` - the query to run for the page
- `props` - props passed into the page component
### API Functions
```js
import previewApi from "next-sanity-extra/api/preview"
```
`previewApi({token, data, redirect})` - API handler to call from sanity for page previews:
- `token` - Sanity API Token
- `data` - [optional] Function from request to preview data to return to client
- `redirect` - [optional] Function from request to a path to redirect to. Defaults to `/${req.query.slug}`
# Typescript Usage
eg `pages/index.tsx`:
```tsx
import { sanityStaticProps, useSanityQuery, PortableText } from "../lib/sanity";
import groq from "next-sanity";
import { GetStaticPropsContext } from "next";
import { SanityProps } from "next-sanity-extra";
const myQuery = groq`*[ etc... ]`;
export const getStaticProps: GetStaticProps = async (context) => ({
props: sanityStaticProps({context, query: myQuery})
})
// Optionally type your page's data:
// SanityProps<{title: string, etc...}>
// Otherwise just use SanityProps
export default function ServicesPage(props: SanityProps) {
const { data, loading, error } = useSanityQuery(query, props);
// Render page with data
{data.title}
}
```