Next.js 14 App Router using sdk-react-nextjs and Contentful

[anandpatel]

Describe the bug
I am using the sdk-react-nextjs package with custom components. I have a carousel component that can have children. These children can only be a custom card component. The card component has 4 inputs.

When I add a carousel to my page and include a card within it, filling in the inputs, the carousel and card render correctly.

The issue occurs when I try to use dynamic data bindings from Contentful, where blog pages are stored. The card does not render any of the dynamic content.

I would like to have the carousel be client side, but the card server side. Am I using sdk-react-nextjs unnecessarily?

Expected behavior
Render card with values.

Screenshots

Additional context

import {
  Content,
  fetchOneEntry,
  getBuilderSearchParams,
  isEditing,
  isPreviewing,
} from '@builder.io/sdk-react-nextjs'

import { BlogCardComponent } from '@/components/destination/cards/BlogCard'
import { BlogCarouselComponent } from '@/components/destination/carousel/BlogCarousel'
import NotFound from '@/app/not-found'

interface PageProps {
  params: {
    page: string[]
  }
  searchParams: Record<string, string>
}

const BUILDER_PUBLIC_API_KEY = process.env.NEXT_PUBLIC_BUILDER_API_KEY!

export default async function Page(props: PageProps) {
  const urlPath = '/' + (props.params?.page?.join('/') || '')

  const content = await fetchOneEntry({
    model: 'page',
    apiKey: BUILDER_PUBLIC_API_KEY,
    options: getBuilderSearchParams(props.searchParams),
    userAttributes: { urlPath },
  })

  const canShowContent =
    content || isPreviewing(props.searchParams) || isEditing(props.searchParams)

  if (!canShowContent) {
    return <NotFound />
  }

  return (
    <Content
      content={content}
      model="page"
      apiKey={BUILDER_PUBLIC_API_KEY}
      customComponents={[
        BlogCardComponent,
        BlogCarouselComponent,
      ]}
    />
  )
}