NextJS 13 Integration with builder.io

Is anyone here tried the nextjs 13 integration?

import { BuilderContent } from "@builder.io/react/dist/types/src/components/builder-content.component";
import { builder, BuilderComponent } from "@builder.io/sdk";
import builderConfig from "../config/builder";

async function loadBuilder<Tdata>(): Promise<Tdata> {
  const content =
    (await builder
      .get("page", {
        apiKey: builderConfig.builderKey,
        url: "/",
        cachebust: true,
        userAttributes: {
          urlPath: "/",
        },
      })
      .promise()) || null;

  return content;
}

export default async function Home() {
  const content: BuilderContent = await loadBuilder<BuilderContent>();

  return (
    <>
      <BuilderComponent content={content} model="page" />
    </>
  );
}

Error below:
Error: Functions cannot be passed directly to Client Components because they’re not serializable.

Please enlighten me on this issue. thank you

Hi @aaesis, We hope you’re doing well!

This doesn’t seem like just a Builder integration issue. It’s more geared up just around nextjs issue, I recommend looking at this post here (improve error message) Error: Functions cannot be passed directly to Client Components because they're not serializable. · Issue #42408 · vercel/next.js · GitHub

Feel free to reach out if the issue persists or have further questions!

This is noted thanks @garima

I just attempted it and it was failing due to emotion-js having issues with the app directory. I am using MUI in a custom component if that makes any difference, but I followed the tips to try to force it to work and was still getting issues due to builder.io’s dependency on emotion. I wasn’t able to resolve it, so I’m reverting back to Next 12 for now.

Key issue: Plans to support Next.js 13 - /app directory · Issue #2928 · emotion-js/emotion · GitHub