Type Alias InferComponents<T>

InferComponents: PortableTextInferComponents<StegaAware<T>>

Infer Portable Text components from a value type. This matches the inference behavior of the components prop on <PortableText>.

Stega-aware version of InferComponents from @portabletext/react: the inferred component props cover both clean query results (sanityFetch with stega: false) and stega-branded results (sanityFetch when stega may be enabled), so the same components object can render both. Strings that may carry stega payloads stay branded inside component props: render them as-is to keep Visual Editing working, and use stegaClean on the individual values you compare against string literals.

This is useful when working with Sanity TypeGen, where defineQuery() and sanityFetch() can infer the shape of Portable Text fields.

Type Parameters

Example

import {PortableText, type InferComponents, defineQuery} from 'next-sanity'
import {sanityFetch} from '@/sanity/lib/live'

export default async function Page({slug}: {slug: string}) {
  const query = defineQuery(`*[_type == "post" && slug.current == $slug][0]{title,content}`)
  const {data} = await sanityFetch({query, params: {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} />}
    </>
  )
}

Type Alias InferComponents<T>

Type Parameters

Example

Settings