Builder blocks content is not rendering on page aside from the preview

Technical Questions
1

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link
e.g. Builder.io: Visual Development Platform

Builder public api key
go to Builder.io: Visual Development Platform and copy your PUBLIC api key

e2f096ba17f74dfd9c140ac050f349a4

What are you trying to accomplish
e.g. I want to integrate builder on a landing page

I am trying to render the blocks from the page builder model in the sidebar of a custom page but it only shows on the preview. I see it coming in when I log out the response from builder.io.

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

What it looks like in the builder.io preview on localhost

image
image992×480 51.4 KB

What it looks like on the site after publishing and confirming the blocks are being returned by builder.io via console log:

image
image965×473 50.1 KB

Code stack you are integrating Builder with
e.g. NextJS, react, Shopify

NextJS, react

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

Not a complete code reproduction, but this is the NextJS page that is failing to render the sidebar built by BuilderComponent and the blocks builder:

function BlogArticle({ article }) {
  const isPreviewing = useIsPreviewing();
  if (!article && !isPreviewing) {
    return (
      <>
        <Head>
          <meta name="robots" content="noindex" />
        </Head>
        <DefaultErrorPage statusCode={404} />
      </>
    );
  }

  console.log('article', article);

  return (
    // Wrapping the structured data in BuilderContent allows
    // it to update in real time as your custom fields are edited in the
    // Visual Editor
    <BuilderContent content={article} options={{ includeRefs: true }} model="blog-page">
      {(content) => {
        if (!content) return;
        console.log('content', content);
        return (
          <>
            <Head>
              {/* Render meta tags from custom field */}
              <title>{content.title}</title>
              <meta name="description" content={content.excerpt} />
              {content.image && <meta name="og:image" content={content?.image} />}
            </Head>

            <Stack row maxWidth={1000} m="auto" p="$6">
              <ArticlePost {...content} />
              <Stack flexBasis="30%">
                <BuilderComponent model="blog-page" content={content} options={{ includeRefs: true }} />
              </Stack>
              {/* Render the Builder drag/drop'd content */}
              {/* <BuilderComponent model="blog-article" content={content} options={{ includeRefs: true }} /> */}
            </Stack>
          </>
        );
      }}
    </BuilderContent>
  );
}
2

Hello @kacey,

Welcome to the builder.io forum.

For blog implementation, you may find help in our blog post Create a drag-and-drop editable blog with Next.js

3

Hi Manish,

That is the article I used as a basis actually but still blocks are not being rendered on the page

4

I rechecked that article and found a fix! Thanks for the point in the right direction @manish-sharma .

For others, my fix was:
Change this

    <BuilderContent content={article} options={{ includeRefs: true }} model="blog-page">
      {(content) => {

to this:

    <BuilderContent content={article} options={{ includeRefs: true }} model="blog-page">
      {(data, loading, fullContent) => {

the BuilderComponent looks like it needed the third param of the BuilderContent component.

1 Like
5

@manish-sharma Hey i tried this approach as well and i followed this Create a drag-and-drop editable blog with Next.js and tried to create a section modal but its not responding on the page i mean i’m not able to edit anything on that page and nothing shows on the page i created folder of blogs in pages and in that i have 2 files of index.jsx and [article].jsx

6

Hello @Shami,

Could you please provide additional context on the issue? It would be immensely helpful if you could share relevant code snippets or screenshots. This will allow us to gain a clearer understanding of the problem and provide more precise assistance.

Thank you!

7

Sure!

@manish-sharma this is the screen im getting on the builder page

image
image1770×985 62.9 KB

and this is my index.jsx

import { builder } from "@builder.io/react";

builder.init(config.BUILDER_IO_API_KEY);

const ARTICLES_PER_PAGE = 30;

function Blog({ articles, pageNumber }) {
  return (
    <div>
      {articles.map((item) => (
        <Link href={/blog/${item.data.handle}}>
          <div css={{ overflow: "hidden", width: 300 }}>
            <div css={{ width: 300, height: 200, display: "block" }}>
              <img src={item.data.image} />
            </div>
            {item.data.title}
            {item.data.description}
          </div>
        </Link>
      ))}
      <div css={{ padding: 20, width: 300, margin: 'auto', display: 'flex' }}>
        {pageNumber > 1 && (
          <a href={/blog/page/${pageNumber - 1}}>
            ‹ Previous page
          </a>
        )}

        {articles.length > ARTICLES_PER_PAGE && (
          <a href={/blog/page/${pageNumber + 1}}>
            Next page ›
          </a>
        )}
      </div>
    </div>
  );
}

export async function getStaticProps({ query }) {
  // Get the page number from the path or query parameter
  // In this example we are hardcoding it as 1
  const pageNumber = 1;
  const articles = await builder.getAll("blog-article", {
    // Include references, like the author ref
    options: { includeRefs: true },
    // For performance, don't pull the blocks (the full blog entry content)
    // when listing
    omit: "data.blocks",
    limit: ARTICLES_PER_PAGE,
    offset: (pageNumber - 1) * ARTICLES_PER_PAGE,
  });

  return { props: { articles, pageNumber }};
}

export default Blog;

and this is my [article.jsx]

and this is my [article.jsx]

import {
  builder,
  BuilderComponent,
  BuilderContent,
  useIsPreviewing,
} from "@builder.io/react";
import Head from "next/head";
import DefaultErrorPage from "next/error";

builder.init(config.BUILDER_IO_API_KEY);

function BlogArticle({ article }) {
  const isPreviewing = useIsPreviewing();
  if (!article && !isPreviewing) {
    return (
      <>
        <Head>
          <meta name="robots" content="noindex" />
        </Head>
        <DefaultErrorPage statusCode={404} />
      </>
    );
  }

  return (
    // Wrapping the structured data in BuilderContent allows
    // it to update in real time as your custom fields are edited in the
    // Visual Editor
    <BuilderContent
      content={article}
      options={{ includeRefs: true }}
      model="blog-article"
    >
      {(content) => (
        <React.Fragment>
          <Head>
            {/* Render meta tags from custom field */}
            <title>{content?.data.title}</title>
            <meta name="description" content={content?.data.blurb} />
            <meta name="og:image" content={content?.data.image} />
          </Head>

          <div>
            <div>{content?.data.title}</div>
            {/* Render the Builder drag/drop'd content */}
            <BuilderComponent
              name="blog-article"
              content={content}
              options={{ includeRefs: true }}
            />
          </div>
        </React.Fragment>
      )}
    </BuilderContent>
  );
}

export async function getStaticProps({ params }) {
  const article = await builder
    .get("blog-article", {
      // Include references, like our author ref
      options: { includeRefs: true },
      query: {
        // Get the specific article by handle
        "data.handle": params.handle,
      },
    })
    .promise();

  return {
    props: {
      article,
    },
  };
}

export async function getStaticPaths() {
  return {
    // Optionally, use builder.getAll() to fetch all paths,
    // or just allow fallback: true to render any path
    paths: [],
    fallback: true,
  };
}

export default BlogArticle;

this is my [[…page]].jsx

// pages/[...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 dynamic from "next/dynamic";
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 },
  });
  return {
    paths: pages.map((page) => ${page.data?.url}).filter(url => url !== '/'),
    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} />
    </>
  );
}
8

i can’t update or put anything on the editor it just shows it on the layers that it’s there but i can’t see it

9

Hello @Shami,

I see you are fetching blog-article using the handle, but on the screenshot, I don’t see any handle defined, additionally, your preview URL is not updated with the handle

If you wish to include draft content, consider using includeUnpublished: true props

  const article =
    (await builder
      .get("blog-article", {
        // Include references, like our `author` ref
        options: { enrich: true, includeUnpublished: true },
        query: {
          // Get the specific article by handle
          "data.handle": params.handle,
        },
      })
      .promise()) || null;