Context: I’m building a Next.js App Router project and I’m trying to build a product details page by using dynamic routes. I followed the instructions on Dynamic Preview URLs - Builder.io.
On the page model, I have a page field called slug and I also have the logic on Dynamic URL Preview, as the documentation suggested.
I have the code on app/products/[handle]/page.tsx like this:
import { RenderBuilderContent } from "../../../components/builder"
import { builder } from "@builder.io/sdk";
import { ProductDisplay } from '@/components/ProductDisplay/';
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!)
export default async function ProductPage({
params,
}: {
params: Promise<{ handle: string }>
}) {
const builderModelName = "product-details";
const { handle } = await params;
const content = await builder
.get(builderModelName, {
query: {
"data.slug": handle,
},
})
.toPromise();
console.log(handle)
console.log(content);
return (
<div>
<ProductDisplay handle={handle} />
<RenderBuilderContent
model={builderModelName}
content={content || undefined}
/>
</div>
);
}
Problem: My problem is that the content is undefined. The console.log(handle)
is fine, and the ProductDisplay
component renders ok on http://localhost:3000/product-details/product1
(or whatever slug I put, the component is working well). But what is below the ProductDisplay
shows as “404” on localhost and on Visual Editor, the blocks of components I put below the ProductDisplay
appear correctly but in the console (f12), is printing undefined as well.
What I am trying to accomplish: I want to have custom product pages, where the first block is the same for all product pages, but what’s below that can be customize by clients. So some products may have Sliders, others may have only Texts and images, but the first block will always be the ProductDisplay
component. But this content below is coming as undefined on console and 404.
What I tried
I tried to get the content like:
const content = await builder
.get(builderModelName, {
userAttributes: {
urlPath: `/${handle}`,
},
})
.toPromise();
and with prerender: false, but the content is always undefined.
Please, if anyone knows the correct way to get the builder content I’ll be gratefull.
Thank you