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:
-
I deleted the […page] folder, as I will only have a single page that I want to edit using builder.
-
Added a page component with:
page url: “/”
title: “homepage” -
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;
}
- 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”} />
)
}