Builder and NextJS (App Router) not working properly at root url ("/")

[Alexx]

Hi,

I am on NextJs, App-router. My main interest is not to make multiple pages, but to use the page-builder only on the main (root) page.

However, I am running into trouble when using “/” as a path.

That is:
The builder.io editor does not work properly, showing no content besides the header and footer that is supplied by by nextjs app. When I drag something in the editor, the content is not shown and there is no interactivity.
Is seems like builder has a specific problem with the root path (“/”), any other path works well and the editor works.

Did anyone of you get this to work properly, specifically on the root url?

My setup is as follows:

1. I deleted the […page] folder, as I will only have a single page that I want to edit using builder.

2. Added a page component with:
   page url: “/”
   title: “homepage”

3. I added the builder.tsx:

// components/builder.tsx
“use client”;
import { ComponentProps } from “react”;
import { builder } from “@builder.io/sdk”;
import { BuilderComponent, useIsPreviewing } from “@builder.io/react”;

// Replace with your Public API Key
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY);

type BuilderPageProps = ComponentProps;

export function RenderBuilderContent(props: BuilderPageProps) {
// Call the useIsPreviewing hook to determine if
// the page is being previewed in Builder
const isPreviewing = useIsPreviewing();

// If "content" has a value or the section is being previewed in Builder,
// render the BuilderComponent with the specified content and model props.
if (props.content || isPreviewing) {
  return <BuilderComponent {...props} />;
}

return null;

}

4. Modified the main page.tsx in the app folder to:

import Layout from “@/components/layouts/home/layout”
import { builder } from “@builder.io/sdk”;
import { RenderBuilderContent } from “./builder”;

builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY);

export default async function Home(props) {

const content = await builder
.get(“homepage”, {
userAttributes: {
urlPath: “/” + (props?.params?.page?.join(“/”) || “”),
},
})
.toPromise();

return (

<RenderBuilderContent content={content} model={“homepage”} />

)
}

[manish-sharma]

Hello @Alexx,

Welcome to the Builder.io forum!

It looks like there is an issue with the model name you’re using in your builder.get call and RenderBuilderContent. The model named “homepage” is not available under your space, “Alex Space.” I recommend updating the model name to “page” instead.

Here’s the updated code for your reference:

import Layout from "@/components/layouts/home/layout";
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "./builder";

builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY);

export default async function Home(props) {
  const content = await builder
    .get("page", {
      userAttributes: {
        urlPath: "/" + (props?.params?.page?.join("/") || ""),
      },
    })
    .toPromise();

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

If you are working in a different space that does have a model called “homepage,” please let us know, and we’ll be happy to assist you further.

Thank you!