NextJS 13 Integration with builder.io

General
,
1

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

2

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!

3

This is noted thanks @garima

4

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

5

Hey @TSIA_SN, Yes, looks like you’ve figured this right. Next.js 13 was released with built-in layout support in /app folder-based project. However, Emotion and MUI are not compatible yet with it. We can now upgrade to Next.js 13, but we cannot use /app folders yet until these issues are solved:
vercel/next.js#41994emotion-js/emotion#2928mui/material-ui#34896mui/material-ui#34898mui/material-ui#34905

6

I’ve been trying to get Builder to work with Next 13, but I see weird issues, such as losing my layout when I use the browser’s back button, or having every page render what should have been the previous page when using @builder/sdk instead of @builder/react to fetch a page and pass it directly to <BuilderComponent model='page' page={page} /> on the server.

Does anyone have an example repo?