# NextJS 13 Integration with builder.io

**URL:** <https://forum.builder.io/t/nextjs-13-integration-with-builder-io/3143>\
**Category:** General\
**Tags:** react, nextjs\
**Created:** [January 24, 2023, 10:12am UTC](https://forum.builder.io/t/nextjs-13-integration-with-builder-io/3143 "2023-01-24T10:12:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![aaesis](https://avatars.discourse-cdn.com/v4/letter/a/5daacb/32.png) [@aaesis](https://forum.builder.io/u/aaesis)\
**Post date:** [January 24, 2023, 10:12am UTC](https://forum.builder.io/t/nextjs-13-integration-with-builder-io/3143/1 "2023-01-24T10:12:42Z")

</div>

Is anyone here tried the nextjs 13 integration?

```auto
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

---

<div class="post-metadata">

**Author:** ![anon43891756](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@anon43891756](https://forum.builder.io/u/anon43891756)\
**Post date:** [January 24, 2023, 5:31pm UTC](https://forum.builder.io/t/nextjs-13-integration-with-builder-io/3143/2 "2023-01-24T17:31:04Z")

</div>

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](https://github.com/vercel/next.js/issues/42408)

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

---

<div class="post-metadata">

**Author:** ![aaesis](https://avatars.discourse-cdn.com/v4/letter/a/5daacb/32.png) [@aaesis](https://forum.builder.io/u/aaesis)\
**Post date:** [January 24, 2023, 6:00pm UTC](https://forum.builder.io/t/nextjs-13-integration-with-builder-io/3143/3 "2023-01-24T18:00:55Z")

</div>

This is noted thanks @anon43891756

---

<div class="post-metadata">

**Author:** ![TSIA\_SN](https://avatars.discourse-cdn.com/v4/letter/t/c77e96/32.png) [@TSIA\_SN](https://forum.builder.io/u/TSIA_SN)\
**Post date:** [January 27, 2023, 8:33pm UTC](https://forum.builder.io/t/nextjs-13-integration-with-builder-io/3143/4 "2023-01-27T20:33:23Z")

</div>

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](http://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](https://github.com/emotion-js/emotion/issues/2928)

---

<div class="post-metadata">

**Author:** ![anon43891756](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@anon43891756](https://forum.builder.io/u/anon43891756)\
**Post date:** [January 30, 2023, 5:33am UTC](https://forum.builder.io/t/nextjs-13-integration-with-builder-io/3143/5 "2023-01-30T05:33:39Z")

</div>

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#41994](https://github.com/vercel/next.js/issues/41994)[emotion-js/emotion#2928](https://github.com/emotion-js/emotion/issues/2928)[mui/material-ui#34896](https://github.com/mui/material-ui/issues/34896)[mui/material-ui#34898](https://github.com/mui/material-ui/issues/34898)[mui/material-ui#34905](https://github.com/mui/material-ui/issues/34905)

---

<div class="post-metadata">

**Author:** ![cbejensen](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/cbejensen/32/2428_2.png) [@cbejensen](https://forum.builder.io/u/cbejensen)\
**Post date:** [May 5, 2023, 2:45pm UTC](https://forum.builder.io/t/nextjs-13-integration-with-builder-io/3143/6 "2023-05-05T14:45:25Z")

</div>

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?