{"id":19892109,"url":"https://github.com/otterdev-io/next-sanity-extra","last_synced_at":"2026-03-03T19:01:15.366Z","repository":{"id":39753586,"uuid":"328453766","full_name":"otterdev-io/next-sanity-extra","owner":"otterdev-io","description":"Make using next and sanity (with live preview) even easier","archived":false,"fork":false,"pushed_at":"2022-05-27T05:58:33.000Z","size":218,"stargazers_count":26,"open_issues_count":3,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-01T17:43:52.977Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/otterdev-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-10T18:41:12.000Z","updated_at":"2023-10-18T20:28:14.000Z","dependencies_parsed_at":"2022-09-04T16:21:29.799Z","dependency_job_id":null,"html_url":"https://github.com/otterdev-io/next-sanity-extra","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/otterdev-io/next-sanity-extra","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otterdev-io%2Fnext-sanity-extra","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otterdev-io%2Fnext-sanity-extra/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otterdev-io%2Fnext-sanity-extra/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otterdev-io%2Fnext-sanity-extra/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/otterdev-io","download_url":"https://codeload.github.com/otterdev-io/next-sanity-extra/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otterdev-io%2Fnext-sanity-extra/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30056056,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T18:21:05.932Z","status":"ssl_error","status_checked_at":"2026-03-03T18:20:59.341Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-12T18:21:31.794Z","updated_at":"2026-03-03T19:01:15.330Z","avatar_url":"https://github.com/otterdev-io.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-sanity-extra\nThis package aims to simplify integrating Next.js, and the Sanity.io CMS.\nIt 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\nCheckout out the sanity starter template at https://github.com/otterdev-io/sanity-template-nextjs-vercel-extra to see an example of usage.\n\n# Usage\nFirst to setup the functions, create a module, eg `lib/sanity.js`. Call `setupNextSanity(config)` to get your helper functions:\n\n```js\nimport { setupNextSanity } from \"next-sanity-extra\"\n\n// Standard sanity config\n// Don't forget token, to get a preview client and authenticated client\nconst config = {\n  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,\n  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,\n  useCdn: process.env.NODE_ENV === \"production\",\n  token: process.env.SANITY_API_TOKEN\n};\n\nexport const {\n  sanityClient,\n  imageUrlBuilder,\n  PortableText,\n  sanityStaticProps,\n  useSanityQuery\n } = setupNextSanity(config);\n```\n\nThen you can use the functions in a page, eg `pages/index.jsx`:\n\n```tsx\nimport { sanityStaticProps, useSanityQuery, PortableText } from \"../lib/sanity\";\nimport groq from \"next-sanity\";\n\nconst myQuery = groq`*[ etc... ]`;\n\nexport const getStaticProps = async (context) =\u003e ({\n  props: await sanityStaticProps({context, query: myQuery})\n});\n  \n\nexport default function ServicesPage(props) {\n  const { data, loading, error } = useSanityQuery(query, props);\n\n  // Render page with data\n  \u003ch1\u003e{data.title}\u003c/h1\u003e\n  \u003cPortableText blocks={data.content} /\u003e\n}\n```\n## Preview API\nTo serve live previews, create eg `pages/api/preview.js`.\n\nWith the default settings - forwarding to /[slug]:\n\n```js\nimport previewApi from 'next-sanity-extra/api/preview'\n\nexport default previewApi({token: process.env.SANITY_PREVIEW_TOKEN}) \n```\n\nto forward to custom parameter - eg 'page'\n```js\nimport previewApi from 'next-sanity-extra/api/preview'\n\nexport default previewApi({\n  token: process.env.SANITY_PREVIEW_TOKEN,\n  redirect: (req) =\u003e `/${req.query.page}`\n});\n```\n## Functions\n\n```js\nimport { setupNextSanity } from \"next-sanity-extra\"\n```\n`setupNextSanity(client: ClientConfig, serializers?: PortableTextSerializers)` \n\nReturns an object with functions you can use to ease integration:\n\n- `sanityClient('anonymous' | 'authenticated' | 'preview')` - A sanity client with a given setup. Token must be set in order to use authenticated or preview\n- `imageUrlBuilder` - A ImageUrlBuilder\n- `PortableText` - Portable Text component\n- `sanityStaticProps({context, query, queryParams, authenticated})` - Returns static props for getStaticProps.\n  - `context` - the context passed into getStaticProps\n  - `query` - the query to run for the page.\n  - `queryParams` - [optional] params to substitute into the query. If not provided, will be taken from context.params. \n  - `authenticated` - [optional] whether to use an authenticated sanity client, if you have provided token to config. Defaults to false.\n- `useSanityPreview(query, props)` - A hook which returns preview-enabled data for use in each page.\n  - `query` - the query to run for the page\n  - `props` - props passed into the page component\n\n### API Functions\n```js\nimport previewApi from \"next-sanity-extra/api/preview\"\n```\n`previewApi({token, data, redirect})` - API handler to call from sanity for page previews:\n  - `token` - Sanity API Token\n  - `data` - [optional] Function from request to preview data to return to client\n  - `redirect` - [optional] Function from request to a path to redirect to. Defaults to `/${req.query.slug}`\n\n# Typescript Usage\neg `pages/index.tsx`:\n```tsx\nimport { sanityStaticProps, useSanityQuery, PortableText } from \"../lib/sanity\";\nimport groq from \"next-sanity\";\nimport { GetStaticPropsContext } from \"next\";\nimport { SanityProps } from \"next-sanity-extra\";\n\nconst myQuery = groq`*[ etc... ]`;\n\nexport const getStaticProps: GetStaticProps = async (context) =\u003e ({\n  props: sanityStaticProps({context, query: myQuery})\n})\n\n// Optionally type your page's data: \n// SanityProps\u003c{title: string, etc...}\u003e\n// Otherwise just use SanityProps\nexport default function ServicesPage(props: SanityProps) {\n  const { data, loading, error } = useSanityQuery(query, props);\n\n  // Render page with data\n  \u003ch1\u003e{data.title}\u003c/h1\u003e\n  \u003cPortableText blocks={data.content} /\u003e\n}\n``` ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fotterdev-io%2Fnext-sanity-extra","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fotterdev-io%2Fnext-sanity-extra","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fotterdev-io%2Fnext-sanity-extra/lists"}