Welcome to next-sanity-client 👋

> Sanity Client for Next.js Apps with App Dir Support ## Overview ### Features - Per-request Caching ⭐️ - Full Typescript Support - Edge Runtime Support ## Installation ### yarn ```sh yarn add next-sanity-client ``` ### npm ```sh npm i next-sanity-client ``` ## Usage ```ts import SanityClient from 'next-sanity-client'; const client = new SanityClient({ projectId: 'YOUR_PROJECT_ID', dataset: 'YOUR_DATASET', useCdn: process.env.NODE_ENV === 'production', }); client.fetch({ query: `[_type == 'post']`, config: { cache: 'force-cache', next: { revalidate: 60 } } }); ``` ### Create API Utility #### Predefine Query The client support passing a queries object to get autocomplete when creating your api utilities functions ```ts const client = new SanityClient({ ...config, queries: { getTodosQuery: `` } }) ``` This is useful when you have a file with your queries, you can simply pass it to the client ```ts // lib/queries.ts export const getTodosQuery = groq`[_type == 'todo']`; // lib/sanity.ts import * as queries from './queries'; const client = new SanityClient({ ...config, queries }); ``` And you can create a function to fetch that query using it name, full typed ```ts // lib/api.ts export const getTodos = client.createApiUtil('getTodosQuery'); // here also you can set the default caching strategy export const getTodo = client.createApiUtil( 'getTodoQuery', { cache: 'no-cache' } ); // or use your own query export const getProducts = client.createApiUtil(queries.getProducts, { cache: 'no-cache' }); ``` Next in your Server Components: ```ts // app/todos/page.tsx const todos = await getTodos({ cache: 'no-cache' }); // app/todos/[id]/page.tsx const todo = await getTodo({ id: 'uid', next: { revalidate: 10 } }); // components/ProductList.tsx const products = await getProducts({ cache: 'force-cache' }); ``` ## Author 👤 **Fedeya ** - Website: [fedeminaya.com](https://fedeminaya.com) - Twitter: [@fedeminaya](https://twitter.com/fedeminaya) - Github: [@Fedeya](https://github.com/Fedeya) - LinkedIn: [@federico-minaya](https://linkedin.com/in/federico-minaya) ## 🤝 Contributing Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/Fedeya/next-sanity-client/issues). ## Show your support Give a ⭐️ if this project helped you!

Platform

Features

Use cases

Integrations

Learn

Build and share

Frameworks

Discover

Customer stories

Popular guides

Next Sanity Client

Install command

Useful links

Contributor

Federico Minaya

Other plugins by author

NextAuth Sanity