Pass Slice data to client in Nextjs 14

Developing with Prismic
, ,
23

I went ahead and recreated your setup as best I could based on the info you provided in your code/screenshots. Here's the solution I came up with that also has no TS errors (I left console.logs):

// slices/Tabs/index.tsx
import { Content, isFilled } from '@prismicio/client'
import { SliceComponentProps } from '@prismicio/react'
import { createClient } from '@/prismicio'
import { TabDocumentData } from '../../../prismicio-types'
import TabsList from './TabsList'

/**
 * Props for `Tabs`.
 */
export type TabsProps = SliceComponentProps<Content.TabsSlice>

/**
 * Component for "Tabs" Slices.
 */
const Tabs = async ({ slice }: TabsProps): Promise<JSX.Element> => {
  const client = createClient()

  const tabs = await Promise.all(
    slice.items.map((item) => {
      if (isFilled.contentRelationship(item.tab) && item.tab.uid) {
        return client.getByUID('tab', item.tab.uid)
      }
    })
  )

  const tabData = tabs.map((tab) => tab?.data) as TabDocumentData[]

// I included the id prop for TabsList because I don't like using index as a key value

  return (
    <section
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      <TabsList tabData={tabData} id={slice.id} />
    </section>
  )
}

export default Tabs

And now here's the TabsList client component

// slices/Tabs/TabsList.tsx
'use client'

import { TabDocumentData } from '../../../prismicio-types'
import { PrismicRichText } from '@prismicio/react'

export default function TabsList({
  tabData,
  id,
}: {
  tabData: TabDocumentData[]
  id: string
}) {
  console.log('tabData ===> ', tabData)
  return (
    <>
      {tabData.length > 0 &&
        tabData.map((tab, index) => {
          return <PrismicRichText key={id + index} field={tab.heading} />
        })}
    </>
  )
}

How does that work for you?

24

Thank you so much! I appreciate your help.

For my understanding TabDocumentData needs to be used for both server and client.

25

I don't believe the

as TabDocumentData[]

was necessary but I don't think it hurts leaving it in the slice (server component). I added it to confirm that the typing was correct.

26

TS complained as soon as I removed as TabDocumentData[]; in a slice server component. Looks like it needs it on my end.

Thanks again!

2 Likes