import {PortableText, type InferComponents} from '@portabletext/react'
import {createClient} from '@sanity/client'
import {defineQuery} from 'groq'
const client = createClient(...)
export default async function Page({slug}: {slug: string}) {
const query = defineQuery(`*[_type == "post" && slug.current == $slug][0]{title,content}`)
const data = await client.fetch(query, {slug})
const components = {
block: {
// custom types are autocompleted and fully typed
},
} satisfies InferComponents<typeof data.content>
return (
<>
...
{Array.isArray(data?.content) && <PortableText components={components} value={data.content} />}
</>
)
}
Infer Portable Text components from a value type. This matches the inference behavior of the
componentsprop on<PortableText>.This is useful when working with Sanity TypeGen, where
defineQuery()andclient.fetch()can infer the shape of Portable Text fields.