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

**URL:** <https://forum.builder.io/t/when-trying-to-preview-components-in-builder-io-with-a-local-development-server-running-at-localhost-3000-the-site-is-not-loading-as-expecte/6854>\
**Category:** Visual Editor Help\
**Tags:** nextjs\
**Created:** [December 1, 2024, 1:09pm UTC](https://forum.builder.io/t/when-trying-to-preview-components-in-builder-io-with-a-local-development-server-running-at-localhost-3000-the-site-is-not-loading-as-expecte/6854 "2024-12-01T13:09:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mohammad44p](https://avatars.discourse-cdn.com/v4/letter/m/ecd19e/32.png) [@mohammad44p](https://forum.builder.io/u/mohammad44p)\
**Post date:** [December 1, 2024, 1:09pm UTC](https://forum.builder.io/t/when-trying-to-preview-components-in-builder-io-with-a-local-development-server-running-at-localhost-3000-the-site-is-not-loading-as-expecte/6854/1 "2024-12-01T13:09:34Z")

</div>

**Builder content link**. [Builder.io: Visual Development Platform](https://builder.io/content/40371746ea7146c785e35aa9be7ae082)

**Builder public api key**  
_go to [Builder.io: Visual Development Platform](https://builder.io/account/organization) and copy your PUBLIC api key_

**What are you trying to accomplish**

- [Builder.io](http://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](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](http://Builder.io) and the local development server. The preview URL is set to [http://localhost:3000](http://localhost:3000/) but [Builder.io](http://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**

 ![Screenshot 2024-12-01 144602](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/9/9d32ab62ced020f4118aae39d899ee2e739b7f56.png)

even if he show the localhost:3000

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/f3b4695806d0647164ebc38c1961b4a1e1353ff0.jpeg)

**Code stack you are integrating Builder with**  
NextJS

---

<div class="post-metadata">

**Author:** ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)\
**Post date:** [December 2, 2024, 9:41am UTC](https://forum.builder.io/t/when-trying-to-preview-components-in-builder-io-with-a-local-development-server-running-at-localhost-3000-the-site-is-not-loading-as-expecte/6854/2 "2024-12-02T09:41:02Z")

</div>

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

 ![Screenshot 2024-12-02 at 3.09.17 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/1/194c83bdf8d5d9af70fc6fdefb4351d39627d264.png)

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

---

<div class="post-metadata">

**Author:** ![mohammad44p](https://avatars.discourse-cdn.com/v4/letter/m/ecd19e/32.png) [@mohammad44p](https://forum.builder.io/u/mohammad44p)\
**Post date:** [December 2, 2024, 11:17am UTC](https://forum.builder.io/t/when-trying-to-preview-components-in-builder-io-with-a-local-development-server-running-at-localhost-3000-the-site-is-not-loading-as-expecte/6854/3 "2024-12-02T11:17:24Z")

</div>

![Snap](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/e/ea88d196f9464844e577175499b91cda45e4c185.jpeg)  
 ![Snap (1)](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d8b893f016c8604615772b645796ddefdbe0be19.jpeg)  
 ![Screenshot 2024-12-02 131706](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/2ef78ab65df842f06dee03c0d08fad7bdb4b30e6.png)

---

<div class="post-metadata">

**Author:** ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)\
**Post date:** [December 4, 2024, 9:41am UTC](https://forum.builder.io/t/when-trying-to-preview-components-in-builder-io-with-a-local-development-server-running-at-localhost-3000-the-site-is-not-loading-as-expecte/6854/4 "2024-12-04T09:41:55Z")

</div>

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

Please try this -

```auto
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} />
      
    </>

```