# Using a section model in a custom nextjs component

**URL:** <https://forum.builder.io/t/using-a-section-model-in-a-custom-nextjs-component/3334>\
**Category:** Technical Questions\
**Tags:** nextjs\
**Created:** [March 6, 2023, 3:16pm UTC](https://forum.builder.io/t/using-a-section-model-in-a-custom-nextjs-component/3334 "2023-03-06T15:16:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![robdiablo](https://avatars.discourse-cdn.com/v4/letter/r/df788c/32.png) [@robdiablo](https://forum.builder.io/u/robdiablo)\
**Post date:** [March 6, 2023, 3:16pm UTC](https://forum.builder.io/t/using-a-section-model-in-a-custom-nextjs-component/3334/1 "2023-03-06T15:16:30Z")

</div>

**Builder content link**

> **[Builder.io: Visual Development Platform](https://builder.io/content/f063db170ae642159f5d03b6e8ca0c40/edit?activeDesignerTab=0)**
>
> Builder is an AI-Powered Visual Development Platform that helps teams generate, iterate, and optimize web and mobile experiences in seconds instead of sprints.

**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##

```auto
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

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

```

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [March 6, 2023, 7:24pm UTC](https://forum.builder.io/t/using-a-section-model-in-a-custom-nextjs-component/3334/2 "2023-03-06T19:24:00Z")

</div>

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

> [@Custom Builder React component that needs Redux data](https://forum.builder.io/t/custom-builder-react-component-that-needs-redux-data/38):
>
> Question on custom builder components: what is the recommended way to pass in data from a Redux store to a custom Builder component? We have an “add to cart” button that needs to be fed in Shopify product data that normally would be provided by a custom React hook, which then stores that data in Redux. Would building a custom component that feeds in that data from Redux be the way to go, or would it be better to build a custom data fetch in Builder to get that data, and then build in some utili…

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

---

<div class="post-metadata">

**Author:** ![robdiablo](https://avatars.discourse-cdn.com/v4/letter/r/df788c/32.png) [@robdiablo](https://forum.builder.io/u/robdiablo)\
**Post date:** [March 6, 2023, 10:41pm UTC](https://forum.builder.io/t/using-a-section-model-in-a-custom-nextjs-component/3334/3 "2023-03-06T22:41:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [March 7, 2023, 4:32pm UTC](https://forum.builder.io/t/using-a-section-model-in-a-custom-nextjs-component/3334/4 "2023-03-07T16:32:43Z")

</div>

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!

 ![Screenshot 2023-03-07 at 10.00.56 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/23b1c48557de306418e792972c068fa7ed1c9d23.jpeg)