When trying to preview components in Builder.io with a local development server running at localhost:3000, the site is not loading as expecte

[mohammad44p]

Builder content link . Builder.io: Visual Development Platform

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

What are you trying to accomplish

• Builder.io shows error message: “Your site is not loading as expected”
• Unable to preview components
• Server connection verification fails

Troubleshooting Steps Already Taken

• Verified server is running on http://localhost:3000
• Attempted to refresh the page
• Checked URL matches the testing component URL

Additional Context

This appears to be a connection issue between Builder.io and the local development server. The preview URL is set to http://localhost:3000 but Builder.io is unable to establish a connection.

1. Are there any specific CORS settings required for local development?
2. Should any additional configuration be added to the local development server?
3. Are there known issues with specific frameworks when connecting to localhost?

Screenshots or video link

even if he show the localhost:3000

Code stack you are integrating Builder with
NextJS

[sheema]

Hey @mohammad44p the page you have shared in this post seems to work with my integration.

Please share your integration code with me to investigate this further.

[mohammad44p]

[sheema]

Hey @mohammad44p I don’t see you adding model anywhere in your code.

Please try this -

export default async function Page(props: PageProps) {
  const model = "page"; // add a model
  const content = 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 (
    <>
  
     {/* Render the Builder page */}
      <RenderBuilderContent 
        content={content}
        model={model} />
      
    </>