BuilderComponent doesn't work in Next.js 13 server components (using app router)

I’d like to statically generate my site (pages including content are generated as html during build time, e.g. using output: “export”), but when I include

<BuilderComponent content={content} />

on my page, I get an error:

Error: createContext only works in Client Components. Add the “use client” directive at the top of the file to use it.

How can I include builder components in a server component?

1 Like

The best solution I have found so far is to fetch the page data through the content API in a server component, and pass it to a child client component which contains the imports
BuilderComponent, builder to render the page. This is needed because the different Builder components use React.createContext, which are not supported in a server component.

1 Like

Are there any plans by the builder team to have the BuilderComponent or an alternative component support react server components in the future? :thinking:

1 Like

You can update to React Canary version, then just follow these instructions and adapt it to app router: SSR and SSG -

// See more:
import { use } from "react"
import { builder } from ""
import { getAsyncProps } from ""

async function fetchContentPage() {
  const content = await builder.get("page").promise()
  // wait until the data arrives before rendering
  await getAsyncProps(content)
  return content

export default function MyPageOrComponent() {
  const pageContent = use(fetchContentPage())

  return <BuilderComponent model="page" content={pageContent} />