# We are having trouble connecting to your site

**URL:** <https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209>\
**Category:** Visual Editor Help\
**Created:** [September 18, 2023, 4:51pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209 "2023-09-18T16:51:18Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![anvoids](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/anvoids/32/2915_2.png) [@anvoids](https://forum.builder.io/u/anvoids)\
**Post date:** [September 18, 2023, 4:51pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/1 "2023-09-18T16:51:18Z")

</div>

Every time I try to create an entry on my website I keep getting the “We are having trouble connecting to your site” error, even though I’ve already redone the integration about 3 times already. The page loads correctly but I can’t do anything to it and I get the error.

**Builder public api key**  
e9571557b9244f86bdb93ed4cddad82e

**Screenshots/videos**

> **Image 1**
>
> ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/3/3409e99e80545a6b3697a3681b0fff9714df6bf5.png)

> **Image 2**
>
> ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/fc8c268c099f43c49ada0c08a0d391cde6ae45d6.png)

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

Any help is appreciated!

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 18, 2023, 4:54pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/2 "2023-09-18T16:54:54Z")

</div>

Hello @anvoids,

Welcome to the [builder.io](http://builder.io) forum.

Would you be able to share the screenshot of page.tsx integration code?

---

<div class="post-metadata">

**Author:** ![anvoids](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/anvoids/32/2915_2.png) [@anvoids](https://forum.builder.io/u/anvoids)\
**Post date:** [September 18, 2023, 4:56pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/3 "2023-09-18T16:56:09Z")

</div>

My page is named […page].tsx, and here’s the code:

```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";
import "../builder-registry";

builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);

// 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 <DefaultErrorPage statusCode={404} />;
  }

  // If the page content is available, render
  // the BuilderComponent with the page content
  return (
    <>
      <Head>
        <title>{page?.data?.title}</title>
      </Head>
      {/* Render the Builder page */}
      <BuilderComponent model="page" content={page || undefined} />
    </>
  );
}

```

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 18, 2023, 5:11pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/4 "2023-09-18T17:11:45Z")

</div>

Hello @anvoids,

Can you create a new page with a different route, not the landing page and let us know how that works for you?

 ![Screenshot 2023-09-18 at 10.41.13 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d99448601b11f89ad3244009aa29c76b49835272.png)

---

<div class="post-metadata">

**Author:** ![anvoids](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/anvoids/32/2915_2.png) [@anvoids](https://forum.builder.io/u/anvoids)\
**Post date:** [September 18, 2023, 5:24pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/5 "2023-09-18T17:24:42Z")

</div>

That’s working, but how do I change the home page then?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 18, 2023, 5:29pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/6 "2023-09-18T17:29:05Z")

</div>

Hello @anvoids,

I’m able to reproduce the issue on the vercel domain, however, locally it seems to work fine using your code. Have you set any redirects on next.config.js file?

Also, can you share content for import “…/builder-registry” ?

---

<div class="post-metadata">

**Author:** ![anvoids](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/anvoids/32/2915_2.png) [@anvoids](https://forum.builder.io/u/anvoids)\
**Post date:** [September 18, 2023, 5:38pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/7 "2023-09-18T17:38:38Z")

</div>

There is no redirects and this is the code in builder-registry:

```auto
import { Builder } from "@builder.io/react";
import dynamic from "next/dynamic";

Builder.registerComponent(
  dynamic(() => import("./components/Counter/Counter")),
  {
    name: "Counter",
    inputs: [
      {
        name: "initialCount",
        type: "number",
      },
    ],
  }
);

```

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 18, 2023, 5:43pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/8 "2023-09-18T17:43:46Z")

</div>

Hello @anvoids,

Can you rename […page].tsx to [[…page]].tsx and let us know how that works for you?

---

<div class="post-metadata">

**Author:** ![anvoids](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/anvoids/32/2915_2.png) [@anvoids](https://forum.builder.io/u/anvoids)\
**Post date:** [September 18, 2023, 5:56pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/9 "2023-09-18T17:56:03Z")

</div>

> [@manish-sharma](#):
>
> [[…page]]

When deploying to Vercel, this happens:  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/8/8695d664a5721c6e9b4513fb2a80ac73378dcc57.png)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 18, 2023, 5:57pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/10 "2023-09-18T17:57:12Z")

</div>

Hello @anvoids,

Are you able to build locally?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 18, 2023, 6:00pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/11 "2023-09-18T18:00:45Z")

</div>

Hello @anvoids,

Can you also share a screenshot showing more information on the build error?

---

<div class="post-metadata">

**Author:** ![anvoids](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/anvoids/32/2915_2.png) [@anvoids](https://forum.builder.io/u/anvoids)\
**Post date:** [September 18, 2023, 6:01pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/12 "2023-09-18T18:01:03Z")

</div>

I get a error as well, because of the routing format being incorrect.  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/a4051cde55fd6d3d3ab301a61417d0c93bd2b1da.png)

---

<div class="post-metadata">

**Author:** ![anvoids](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/anvoids/32/2915_2.png) [@anvoids](https://forum.builder.io/u/anvoids)\
**Post date:** [September 18, 2023, 6:01pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/13 "2023-09-18T18:01:34Z")

</div>

Vercel:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/42b071de16362c561a80c05bb06651f418e07458.png)

Locally:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/4d2fb097dd250710ff90a0f8e10f558204c98701.png)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 18, 2023, 6:06pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/14 "2023-09-18T18:06:37Z")

</div>

Hello @anvoids,

Is this an existing next js project or have you created a new one?

> <https://github.com/vercel/next.js/issues/22342>
>
> \*\*What version of Next.js are you using?\*\*
> 
> latest
> 
> \*\*What version of Node.js ar…e you using?\*\*
> 
> 14
> 
> \*\*What browser are you using?\*\*
> 
> n/a
> 
> \*\*What operating system are you using?\*\*
> 
> macOS
> 
> \*\*How are you deploying your application?\*\*
> 
> n/a
> 
> \*\*Describe the Bug\*\*
> 
> I've been trying to convert our CRA to Next.js but it is a large project and need to do it slowly rather than in one go. So I read your documentation on how to migrate and come across the below url:
> 
> https://nextjs.org/docs/migrating/from-create-react-app#single-page-app-spa
> 
> I thought this is great, exactly what I need. New pages can be put into next.js whilst old ones staying in CRA until refactored. 
> 
> I've tried to implement this but I'm running into the error below:
> \`\`\`
> Optional route parameters are not yet supported ("\[\[…app\]\]").
> \`\`\`
> 
> So got three questions here. 
> 1. Is this not supported in your latest version? 
> 2. if it isn't should it be removed from your documentation?
> 3. Have I missed a trick and doing something wrong?
> 
> Many thanks
> 
> \*\*Expected Behavior\*\*
> 
> For Optional route params to be supported.
> 
> \*\*To Reproduce\*\*
> 
> Try to use \[\[...app\]\] in a project

---

<div class="post-metadata">

**Author:** ![anvoids](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/anvoids/32/2915_2.png) [@anvoids](https://forum.builder.io/u/anvoids)\
**Post date:** [September 18, 2023, 6:08pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/15 "2023-09-18T18:08:14Z")

</div>

It’s a new one I’ve created today.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 18, 2023, 6:10pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/16 "2023-09-18T18:10:52Z")

</div>

Are you using cache-all example? Please refer to below link that may give you a solution

> <https://github.com/vercel/next.js/issues/22342#issuecomment-820563996>
>
> \*\*What version of Next.js are you using?\*\*
> 
> latest
> 
> \*\*What version of Node.js ar…e you using?\*\*
> 
> 14
> 
> \*\*What browser are you using?\*\*
> 
> n/a
> 
> \*\*What operating system are you using?\*\*
> 
> macOS
> 
> \*\*How are you deploying your application?\*\*
> 
> n/a
> 
> \*\*Describe the Bug\*\*
> 
> I've been trying to convert our CRA to Next.js but it is a large project and need to do it slowly rather than in one go. So I read your documentation on how to migrate and come across the below url:
> 
> https://nextjs.org/docs/migrating/from-create-react-app#single-page-app-spa
> 
> I thought this is great, exactly what I need. New pages can be put into next.js whilst old ones staying in CRA until refactored. 
> 
> I've tried to implement this but I'm running into the error below:
> \`\`\`
> Optional route parameters are not yet supported ("\[\[…app\]\]").
> \`\`\`
> 
> So got three questions here. 
> 1. Is this not supported in your latest version? 
> 2. if it isn't should it be removed from your documentation?
> 3. Have I missed a trick and doing something wrong?
> 
> Many thanks
> 
> \*\*Expected Behavior\*\*
> 
> For Optional route params to be supported.
> 
> \*\*To Reproduce\*\*
> 
> Try to use \[\[...app\]\] in a project

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 18, 2023, 6:13pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/17 "2023-09-18T18:13:43Z")

</div>

If these steps don’t resolve the issue, we recommend creating a new Next.js project following the steps from the link below:

> **[Integrating Pages - Builder.io](https://www.builder.io/c/docs/integrating-builder-pages#create)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.

---

<div class="post-metadata">

**Author:** ![anvoids](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/anvoids/32/2915_2.png) [@anvoids](https://forum.builder.io/u/anvoids)\
**Post date:** [September 18, 2023, 6:18pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/18 "2023-09-18T18:18:38Z")

</div>

Yes, I just tried this and it still didn’t work.

---

<div class="post-metadata">

**Author:** ![anvoids](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/anvoids/32/2915_2.png) [@anvoids](https://forum.builder.io/u/anvoids)\
**Post date:** [September 18, 2023, 6:19pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/19 "2023-09-18T18:19:09Z")

</div>

I’ve already done that about 3 times, it doesn’t seem to fix the problem. I’m probably going to try with a different framework at this point, thank you for helping.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 18, 2023, 6:24pm UTC](https://forum.builder.io/t/we-are-having-trouble-connecting-to-your-site/4209/20 "2023-09-18T18:24:18Z")

</div>

Thank you for your cooperation. If you ever reconsider using the Builder framework, please feel free to share your reproducible case with us, and we will be more than happy to assist you.

Best regards,