How to integrate section in my code

General
1

Hey @manish-sharma, I hope you’re well

well i am having some issue here i wanna integrate new section modal named “blog-article-template” in my app and i am following this link here Integrating Sections - Builder.io and here it was saying to update my [[…page]].tsx file so i’m not getting it how to update it here in my file. this is my [[…page]].tsx

import React from "react";
import { useRouter } from "next/router";
import { Builder, BuilderComponent, builder, useIsPreviewing } from "@builder.io/react";
import { BuilderContent } from "@builder.io/sdk";
import DefaultErrorPage from "next/error";
import Head from "next/head";
import { GetStaticProps } from "next";
import config from '../config/config';
import "../builder.config"

builder.init(config.BUILDER_IO_API_KEY);

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const page = await builder
    .get("page", {
      userAttributes: {
        urlPath: "/" + ((params?.page as string[])?.join("/") || ""),
      },
    })
    .toPromise();
  return {
    props: {
      page: page || null,
    },
    revalidate: 5,
  };
};
export async function getStaticPaths() {
  const pages = await builder.getAll("page", {
    fields: "data.url",
    options: { noTargeting: true },
  });

  const paths = pages.map((page) => ({
    params: { page: [page.data?.url || ''] },
  }));

  return {
    paths,
    fallback: 'blocking',
  };
}

export default function Page({ page }: { page: BuilderContent | null }) {
  const router = useRouter();
  const isPreviewing = useIsPreviewing();
  if (!page && !isPreviewing) {
    return <DefaultErrorPage statusCode={404} />;
  }
  return (
    <>
      <Head>
        <title>{page?.data?.title}</title>
      </Head>
      <BuilderComponent model="page" content={page || undefined} />
    </>
  );
}

can you help me to integrate this section in my app because right now when i go to Section Modals and select any “blog-article-template” it show me this

image
image1085×726 37.6 KB

and this is the builder.io key for that section modal page

2

Hello @Shami,

For the blog-article-template section model, you will need to set a Preview URL, for reference refer to the below link

Additionally, when integrating the section make sure you update the builder.get call and BuilderComponent with correct model name which should be blog-article-template

  const page = await builder
    .get("blog-article-template", {
      userAttributes: {
        urlPath: "/" + ((params?.page as string[])?.join("/") || ""),
      },
    })
    .toPromise();


<BuilderComponent model="blog-article-template" content={page || undefined} />