Visual Editor Preview is not working for root path for Next JS app router

Visual Editor Help
,
1

Hi all,

I’ve followed the document and set up builder.io in my nextJS app router, but the preview doesn’t work for the existing root path (/).

image
image3360×2070 408 KB

My goal is to edit the root page in the visual editor.

Is there anything I am doing wrong?

Thank you in advance!

2

Hello @shindosu,

Welcome to the Builder.io forum post.

To assist you better, could you please share a screenshot of the directory structure of your Next.js app?

Note: For the landing page to work, If you don’t have an index route, such as pages/index.tsx , use pages/[[...page.tsx]] with two sets of square brackets. The two square brackets means that Builder handles the app’s home page.

The single set of square brackets, in this tutorial, assumes that you are keeping your home page.

3

Hi @manish-sharma

Thank you for responding and forgive me for the late reply, it’s hard to reply fast with different timezones.

I’ve actually just freshly built my project so right now it looks like this.

image
image904×1158 113 KB

4

So for the homepage to work, would I edit the existing root page.tsx and rename that to [[…page.tsx]]?

image
image1920×1446 117 KB

5

Hello @shindosu,

If you want the landing page to work with the builder, consider changing the [...page] directory to [[...page]] with two sets of square brackets or integrate the builder code for the app → page.tsx.

Example code for app → page.tsx.

import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "@/components/builder"; // Adjust the path as needed

// Replace with your Public API Key
builder.init('YOUR_API_KEY');

interface PageProps {
  params: {
    page: string[];
  };
}

export default async function Page(props: PageProps) {
  const model = "page";
  const content = await builder
    .get("page", {
      userAttributes: {
        urlPath: "/" ,
      },
      prerender: false,
    })
    .toPromise();

  return (
    <>
      {/* Render the Builder page */}
      <RenderBuilderContent content={content} model={model} />
    </>
  );
}

Thanks,

6

Hi @manish-sharma ,

Thank you so much using the offered code in app/page.tsx solved the trick.

But now I am not able to see the elements that I have placed inside the visual editor of my root path. Does this have something to do with the changes, or am I missing something?

Thank you

image
image1920×1214 63.6 KB

7

Hello @shindosu,

The integration code seems correct. Have you updated your Public API Key on the builder.init call?

builder.init('YOUR_API_KEY');

Additionally, can you try disabling the artboard mode and let me know if that makes any difference?

8

Hello @shindosu,

I wanted to check if you were able to resolve the issue with elements not showing. If the issue still persists, please let us know.

Thanks,

9

Hi @manish-sharma ,

Sorry I haven’t gotten to try it out yet. I will try and reply with the results.