404 embeded into content in Next JS 14

Technical Questions
1

Builder content link
Builder.io: Visual Development Platform

Builder public api key
4548a442f6fd4f2692c6136a799b22ed

What are you trying to accomplish
e.g. I want to integrate builder on a my homepage

Screenshots or video link

Screenshot 2024-01-12 at 11.06.59 PM
Screenshot 2024-01-12 at 11.06.59 PM2032×1083 510 KB

Code stack you are integrating Builder with
NextJS latest

Reproducible code example

import Link from "next/link"
import styled from "styled-components"
// you can import these packages anywhere
const LogRocket = require('logrocket');
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "../components/builder";

// Builder Public API Key set in .env file
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);

interface PageProps {
  params: {
    page: string[];
  };
}

// only initialize when in the browser
if (typeof window !== 'undefined') {
  LogRocket.init('');
  // plugins should also only be initialized when in the browser
}



export default async function Home() {

  const homepageContent = await builder
    .get('homepage', {
      prerender: false,
      noEditorUpdates: true,
    })
    .toPromise();
  return (
    <div style={{ "margin": "0 auto" }} className="prose dark:prose-invert">
      <RenderBuilderContent content={homepageContent} />
    </div>

  )
}

It works fine in the editor but the live preview gives me a 404

2

I was hoping someone could help me with this I am wanting to launch soon, I have built out everything in builder with components from figma and such but nothing renders in the actual site just in builder.

3

had to do this

export default async function Home(props) {

  const homepageContent = await builder
    // Get the page content from Builder with the specified options
    .get("page", {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: "/" + (props?.params?.page?.join("/") || ""),
      },
      // Set prerender to false to return JSON instead of HTML
      prerender: false,
    })
    // Convert the result to a promise
    .toPromise();
  return (
    <div style={{ "margin": "0 auto" }} className="md:w-3/4">
      <RenderBuilderContent content={homepageContent} />
    </div>

  )
}

since the other way instructions for a section model not a page model.