import {createClient} from 'next-sanity'
import {defineLive} from 'next-sanity/live'
const client = createClient({
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
useCdn: true,
perspective: 'published',
})
const token = process.env.SANITY_API_READ_TOKEN
export const {sanityFetch, SanityLive} = defineLive({
client,
browserToken: token,
serverToken: token,
})
// app/layout.tsx
import {SanityLive} from '@/sanity/live'
export default function RootLayout({children}: {children: React.ReactNode}) {
return (
<html lang="en">
<body>
{children}
<SanityLive />
</body>
</html>
)
}
// app/[slug]/page.tsx
import {defineQuery} from 'next-sanity'
import {sanityFetch} from '@/sanity/live'
const POSTS_SLUGS_QUERY = defineQuery(`
*[_type == "post" && slug.current]{"slug": slug.current}
`)
const POST_QUERY = defineQuery(`
*[_type == "post" && slug.current == $slug][0]
`)
export async function generateStaticParams() {
const {data} = await sanityFetch({
query: POSTS_SLUGS_QUERY,
perspective: 'published',
stega: false,
})
return data
}
export default async function Page(props: PageProps<'/[slug]'>) {
const {slug} = await props.params
const {data} = await sanityFetch({
query: POST_QUERY,
params: {slug},
})
return <pre>{JSON.stringify(data, null, 2)}</pre>
}
Set up Sanity Live.
defineLivereturnssanityFetchand<SanityLive />, which connect your Sanity client to the Live Content API so pages can serve cached content and update in response to fine-grained content changes.