Builder content link
Builder public api key
27a69f9f8ab94fc3848091acee3f5c81
What are you trying to accomplish
I followed the tutorials to add a blog section model. I’m able to query this model to get my blog on a page as well as get a list of all blog articles for a blog listing page. What I want to do is now be able to create a custom component that will have a title and a description and then also retrieve the 3 latest blog articles. I added the code in my custom component that registers the title and description. I also added a getstaticprops to retrieve the last 3 articles.
When I add the custom component to a page and fill out the title and description, they show up, but the 3 blog articles do not. I’m assuming that getstaticprops doesnt work within a custom component and that is why. I’ve tried using references in the component registration but that doesn’t work either.
How can I pull in the blog section model into a custom component? I can’t find anything to show how to do this.
Screenshots or video link
Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing
Code stack you are integrating Builder with
NextJS
Reproducible code example
##Custom Component##
import { formatDate } from "@/lib/formatDate";
import { builder, BuilderContent } from "@builder.io/react";
builder.init("27a69f9f8ab94fc3848091acee3f5c81");
const Blog = (props) => {
return (
<div className="relative bg-gray-50 px-6 pt-6 pb-20 lg:px-8 lg:pt-4 lg:pb-8">
<div className="absolute inset-0">
<div className="h-1/3 bg-white sm:h-2/3" />
</div>
<div className="relative mx-auto max-w-7xl">
<div className="text-center">
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
{props.heading}
</h2>
<p className="mx-auto mt-3 max-w-2xl text-xl text-gray-500 sm:mt-4">
{props.text}
</p>
</div>
<div className="mx-auto mt-12 flex max-w-lg gap-5 lg:max-w-none justify-center">
{props.articles?.map((article, index) => (
<div
key={index}
className="flex flex-col overflow-hidden rounded-lg shadow-lg"
>
<div className="flex-shrink-0">
<img
className="h-48 w-full object-cover"
src={article.data?.image}
alt=""
/>
</div>
<div className="flex flex-1 flex-col justify-between bg-white p-6">
<div className="flex-1">
<p className="text-sm font-medium text-indigo-600">
{formatDate(article.data?.date)}
</p>
<a href={article.data?.handle} className="mt-2 block">
<p className="text-xl font-semibold text-gray-900">
{article.data?.title}
</p>
<p className="mt-3 text-base text-gray-500">
{article.data?.blurb}
</p>
</a>
</div>
</div>
</div>
))}
</div>
</div>
</div>
);
};
export async function getStaticProps() {
const articles = await builder.getAll("blog-article", {
// Include references, like our `author` ref
options: { includeRefs: true },
// For performance, don't pull the `blocks` (the full blog entry content)
// when listing
omit: "data.blocks",
});
console.log("ArticlesSection", articles);
return { props: { articles } };
}
export default Blog;
Component Registration
Builder.registerComponent(
dynamic(() => import("./components/sections/blog")),
{
name: "Blog",
inputs: [
{ name: "heading", type: "string" },
{ name: "text", type: "string" },
],
}
);
