Hello,
I am having a really hard time using builder.io and the section elements.
I tried a lot of things but none seems to work.
I try to build an article like section.
I am using nextJS and the APP Routeur
In my VIsual Builder I do see the article and I can add blocks to it but when publish it does not reflect on my page.
I only see the title on my page after publishing.
This is my page code
import React from "react";
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "@/components/builder";
import Head from "next/head";
// Replace with your Public API Key
builder.init("MYKEY");
interface PageProps {
params: {
page: string[];
};
}
export default async function BlogArticle(props: PageProps) {
const content = await builder
.get("blog-post", {
prerender: true,
// Include references, like the `author` ref
options: { includeRefs: true },
query: {
// Get the specific article by handle
"data.slug": props?.params?.page?.join("/"),
},
})
.toPromise();
return (
<>
<Head>
{/* Render meta tags from custom field */}
<title>{content?.data.title}</title>
</Head>
<div>
<div>{content?.data.title}</div>
{/* Render the Builder drag/droped content */}
<RenderBuilderContent
content={content}
model="blog-post"
/>
</div>
</>
);
}
This is my renderBuilderContent
interface BuilderPageProps {
content: any;
model: string;
}
export function RenderBuilderContent({ content, model }: BuilderPageProps) {
const isPreviewing = useIsPreviewing();
return <BuilderComponent content={content} model={model} />;
return null;
}