Confused on how to use Section Models

Technical Questions
, , ,
1

Is there a demo video or some more detailed documentation on how to use Section Models? I’m sorely confused on the concept and how to actually use it. I’ve been over the Announcement Bar and Hero, but the example and code is woefully lacking in susbstance.

And how would I set up a Preview URL successfully for a Hero Section that belongs on a /blog/{{slug}} route?

2

I’m also still trying to figure out how I would have dynamic data be injected into my Section Model. For example, Product Detail Page with a Product Hero Section which includes a Hero component. I get the data based on the slug (dynamically) for the Product Page, I then want to use values from the response in my Product Hero.

3

Hello @brdev,

We have a helpful blog post that covers how to create drag-and-drop blog articles using the section model. It might be just what you’re looking for!

You can check it out here:

Hope it helps!

4

Is there one with Next.js 14 App Router?

5

Hello @brdev,

Unfortunately, we currently do not have an app router example. However, it will be similar to the code provided below. You can modify it if needed and give it a try

// src/app/blog/[slug]/page.tsx
import { builder, BuilderComponent } from '@builder.io/react';
import DefaultErrorPage from "next/error";
import { useIsPreviewing } from '@builder.io/react';
import { HeroContainer, Title, Eyebrow, AuthorBlock, Header, Footer } from '@/components'; // Ensure these components are correctly imported from your components folder

export default async function BlogArticle({ params }) {
  const { slug } = params;
  
  // Fetching article data from Builder
  const articleData = await builder.get('blog-article', {
    query: {
      'data.slug': slug
    },
    options: {
      enrich: true
    },
    prerender: false,
  }).toPromise();

  const isPreviewing = useIsPreviewing();
  const show404 = !articleData && !isPreviewing;

  if (show404) {
    return <DefaultErrorPage statusCode={404} />;
  }
  
  return (
    <>
      <Header />
      <BuilderComponent model="blog-article" content={articleData}>
        {(data, loading, fullContent) => (
          <div>
            <HeroContainer backgroundImage={data?.image}>
              <Title>{data?.title}</Title>
              <Eyebrow>{data?.blurb}</Eyebrow>
              <AuthorBlock>
                By {data?.author?.value?.data?.name}
                <div>{new Date(data?.timestamp).toLocaleDateString()}</div>
              </AuthorBlock>
            </HeroContainer>
            <div>
              <BuilderComponent model="blog-article" content={fullContent} />
            </div>
          </div>
        )}
      </BuilderComponent>
      <Footer />
    </>
  );
}

Hope this helps!

Thanks,

6

I’m trying to do SSR, so I don’t think this will work…I honestly don’t know why this is so difficult to get working.

image
image2016×530 38.7 KB

7

Hello @brdev,

Could you please provide a reproducible example repo so we can investigate and verify the code? If that is not possible, please share the builder integration code, and we will attempt to reproduce the error.

Best regards,

8

Hello @brdev,

If this issue persists, could you please provide a reproducible example repository or the relevant builder integration code? This will help us better understand the problem and assist you more effectively.

Thank you!