### Author:  [@jayman](https://forum.builder.io/u/jayman)
#### Post date: [November 14, 2023, 7:59pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site-i-see-my-website-in-the-builder/4459/1 "2023-11-14T19:59:48Z")
Hello,
I believe that I have followed every step correctly according to the beginners’ guide tutorial but I’m still seeing issues. I can access my website through [http://localhost:3000/](http://localhost:3000/) and it also shows in the builder but somehow it doesn’t work.
Please help, I’m lost.
_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**
> **[Builder.io: Drag & Drop Headless CMS](https://builder.io/content/4378d99363c444f5a6c40606b03f26ce/edit?activeDesignerTab=0)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..
**Builder public api key**
_go to 945d216d92e14e288fcb30e5b308ece6 and copy your PUBLIC api key_
**What are you trying to accomplish**
I want to integrate builder on a landing page\*
**Code stack you are integrating Builder with**
NextJS, react, TS
**Reproducible code example**
import React from “react”;
import { useRouter } from “next/router”;
import { 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”;
// Replace with your Public API Key
builder.init(“945d216d92e14e288fcb30e5b308ece6”);
// Define a function that fetches the Builder
// content for a given page
export const getStaticProps: GetStaticProps = async ({ params }) =\> {
// Fetch the builder content for the given page
const page = await builder
.get(“page”, {
userAttributes: {
urlPath: “/” + ((params?.page as string)?.join(“/”) || “”),
},
})
.toPromise();
// Return the page content as props
return {
props: {
page: page || null,
},
// Revalidate the content every 5 seconds
revalidate: 5,
};
};
// Define a function that generates the
// static paths for all pages in Builder
export async function getStaticPaths() {
// Get a list of all pages in Builder
const pages = await builder.getAll(“page”, {
// We only need the URL field
fields: “data.url”,
options: { noTargeting: true },
});
// Generate the static paths for all pages in Builder
return {
paths: pages.map((page) =\> `${page.data?.url}`).filter(url =\> url !== ‘/’),
fallback: ‘blocking’,
};
}
// Define the Page component
export default function Page({ page }: { page: BuilderContent | null }) {
const router = useRouter();
const isPreviewing = useIsPreviewing();
// If the page content is not available
// and not in preview mode, show a 404 error page
if (!page && !isPreviewing) {
return ;
}
// If the page content is available, render
// the BuilderComponent with the page content
return (
\<\>
{page?.data?.title}
{/\* Render the Builder page \*/}
\
\
);
}
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [November 15, 2023, 7:13am UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site-i-see-my-website-in-the-builder/4459/2 "2023-11-15T07:13:20Z")
Hello @jayman,
Greetings and welcome to the [Builder.io](http://Builder.io) forum!
Upon examining your situation, it appears that there might be an issue with your directory structure. The `[[...page]].tsx` file seems to be located inside the `pages -> api/users` directory, which may not be suitable when utilizing Builder for landing pages. A recommended solution could be to relocate the `[[...page]].tsx` file directly inside the `pages` directory.
Feel free to give this adjustment a try, and if you have any further questions or concerns, our community is here to help!
Best regards,
---
### Author:  [@jayman](https://forum.builder.io/u/jayman)
#### Post date: [November 17, 2023, 2:08pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site-i-see-my-website-in-the-builder/4459/3 "2023-11-17T14:08:35Z")
Hello, thank you for your advice. I decided to start over because it wasn’t working even with your recommendation.
However it still doesn’t work.
After I installed the project tsconfig.json was showing two errors. I think I somehow fixed that but the page is still not being shown in the builder and showing the same error.
I also tried to follow your Youtube tutorial but I never got a chance to see this screen.
Not sure what I’m doing wrong at this point.
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [November 17, 2023, 2:14pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site-i-see-my-website-in-the-builder/4459/4 "2023-11-17T14:14:07Z")
Hello @jayman,
Could you share the screenshot of your current setup and [[…page]].tsx code?
---
### Author:  [@jayman](https://forum.builder.io/u/jayman)
#### Post date: [November 17, 2023, 3:02pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site-i-see-my-website-in-the-builder/4459/5 "2023-11-17T15:02:52Z")
Hello @manish-sharma
sure thing here it is,
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [November 17, 2023, 4:24pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site-i-see-my-website-in-the-builder/4459/6 "2023-11-17T16:24:19Z")
Hello @jayman,
This doesn’t help much, could you please help us with the entire code from [[…page]].tsx?
---
### Author:  [@luisg05](https://forum.builder.io/u/luisg05)
#### Post date: [November 21, 2023, 6:08am UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site-i-see-my-website-in-the-builder/4459/7 "2023-11-21T06:08:40Z")
I switched from Safari to Chrome and now my preview works. Try that
---
### Author:  [@jayman](https://forum.builder.io/u/jayman)
#### Post date: [November 21, 2023, 2:41pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site-i-see-my-website-in-the-builder/4459/9 "2023-11-21T14:41:21Z")
Hello @manish-sharma
here is the code
import React from “react”;
import { useRouter } from “next/router”;
import { 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”;
// Replace with your Public API Key
builder.init(“945d216d92e14e288fcb30e5b308ece6”);
// Define a function that fetches the Builder
// content for a given page
export const getStaticProps: GetStaticProps = async ({ params }) =\> {
// Fetch the builder content for the given page
const page = await builder
.get(“page”, {
userAttributes: {
urlPath: “/” + ((params?.page as string)?.join(“/”) || “”),
},
})
.toPromise();
// Return the page content as props
return {
props: {
page: page || null,
},
// Revalidate the content every 5 seconds
revalidate: 5,
};
};
// Define a function that generates the
// static paths for all pages in Builder
export async function getStaticPaths() {
// Get a list of all pages in Builder
const pages = await builder.getAll(“page”, {
// We only need the URL field
fields: “data.url”,
options: { noTargeting: true },
});
// Generate the static paths for all pages in Builder
return {
paths: pages.map((page) =\> `${page.data?.url}`).filter(url =\> url !== ‘/’),
fallback: ‘blocking’,
};
}
// Define the Page component
export default function Page({ page }: { page: BuilderContent | null }) {
const router = useRouter();
const isPreviewing = useIsPreviewing();
// If the page content is not available
// and not in preview mode, show a 404 error page
if (!page && !isPreviewing) {
return ;
}
// If the page content is available, render
// the BuilderComponent with the page content
return (
\<\>
{page?.data?.title}
{/\* Render the Builder page \*/}
\
\
);
}
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [November 21, 2023, 3:24pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site-i-see-my-website-in-the-builder/4459/10 "2023-11-21T15:24:46Z")
Hello @jayman,
We are still not able to reproduce this issue on our end.
```auto
import React from "react";
import { useRouter } from "next/router";
import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react";
import DefaultErrorPage from "next/error";
import Head from "next/head";
import { BuilderContent } from "@builder.io/sdk";
import { GetStaticProps } from "next";
builder.init("945d216d92e14e288fcb30e5b308ece6");
// Define a function that fetches the Builder
// content for a given page
export const getStaticProps: GetStaticProps = async ({ params }) => {
// Fetch the builder content for the given page
const page = await builder
.get("page", {
userAttributes: {
urlPath: "/" + ((params?.page as string[])?.join("/") || ""),
},
})
.toPromise();
// Return the page content as props
return {
props: {
page: page || null,
},
// // Revalidate the content every 5 seconds
revalidate: 5,
};
};
// Define a function that generates the
// static paths for all pages in Builder
export async function getStaticPaths() {
// Get a list of all pages in Builder
const pages = await builder.getAll("page", {
// We only need the URL field
fields: "data.url",
options: { noTargeting: true },
});
// Generate the static paths for all pages in Builder
return {
paths: pages
.map((page) => String(page.data?.url))
.filter((url) => url !== "/"),
fallback: "blocking",
};
}
// Define the Page component
export default function Page({ page }: { page: BuilderContent | null }) {
const router = useRouter();
const isPreviewing = useIsPreviewing();
// If the page content is not available
// and not in preview mode, show a 404 error page
if (!page && !isPreviewing) {
return ;
}
return (
<>
{page?.data?.title}
{/* Render the Builder page */}
);
}
```
---
### Author:  [@bhavanak](https://forum.builder.io/u/bhavanak)
#### Post date: [June 4, 2024, 7:40am UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site-i-see-my-website-in-the-builder/4459/11 "2024-06-04T07:40:26Z")
Hello Team,
Continuing the above issue. I am also facing the same issue that it is not working in the **safari** browser `http://localhost:3000/`. Throws `Preview load error` attached the screenshot below for the same. But works in Chrome and Firefox.
Please do help me here in fixing this issue.
