Using a section model in a custom nextjs component

Builder content link

Builder public api key

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

Reproducible code example

##Custom Component##

import { formatDate } from "@/lib/formatDate";
import { builder, BuilderContent } from "";


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 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">
          <p className="mx-auto mt-3 max-w-2xl text-xl text-gray-500 sm:mt-4">
        <div className="mx-auto mt-12 flex max-w-lg gap-5 lg:max-w-none justify-center">
          {props.articles?.map((article, index) => (
              className="flex flex-col overflow-hidden rounded-lg shadow-lg"
              <div className="flex-shrink-0">
                  className="h-48 w-full object-cover"
              <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">
                  <a href={} className="mt-2 block">
                    <p className="text-xl font-semibold text-gray-900">
                    <p className="mt-3 text-base text-gray-500">

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

  dynamic(() => import("./components/sections/blog")),
    name: "Blog",
    inputs: [
      { name: "heading", type: "string" },
      { name: "text", type: "string" },

Hi @robdiablo,

So you absolutely can register a component that is pre-connected to the 3 latest blog articles data, you can use useEffect hook to fetch the 3 latest blogs and then pass it to the custom component, you may find help at the below forum post

Let us know how that works for you. Thank you!

So I implemented the useEffect in the custom component and it renders fine when viewing the page. However, when adding the custom component to a page, the only preview I see live is the title and description. The data that comes in from the custom hook to show the recent blog posts doesn’t appear. How can I get it to appear in the preview? Is it possible? Even though the content author may not be selecting the blog posts that show, they would still want to see how the component looks on the page before publishing.

Hi @robdiablo,

We had a look at your test content and it looks like blog-articles are now loading, let us know if this is still an issue for you. Thank you!