Why my output in nextjs seems off

[aaesis]

Below screenshot under data it is HTML which it is not rendering well.

Below screenshot under data it is blocks which rendering well.

Can you please tell me why it output like this? First screenshot I am using nextjs13 app directory, while the other is using nextjs13 - pages. Please help!

[manish-sharma]

Hi @aaesis,

Could you please share the example API call for both requests, so that we can investigate this further?

[aaesis]

Thanks for quick reply.

For the second screenshot which is working, I am using this example below:

GitHub - BuilderIO/nextjs-builder-edge-personalization

For the 1st one which is not rendering. I am using next13-app directory.

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

  return content;
}

[manish-sharma]

Hi @aaesis,

There is a slight chance this is not solvable until below issue is solved Monitor Next.js 13 Layout integration with Emotion + MUI · Issue #21 · accelist/nextjs-starter · GitHub

#21 Monitor Next.js 13 Layout integration with Emotion + MUI

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. This issue tracks the related issues for implementing the above-mentioned feature: nextauthjs/next-auth#5639 next-auth is now compatible with Node.js 18~~nextauthjs/next-auth#5650~~ next-auth is now compatible with Next.js 13We 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