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
Code stack you are integrating Builder with
NextJS
Any help is appreciated!
Hello @anvoids,
Welcome to the builder.io forum.
Would you be able to share the screenshot of page.tsx integration code?
My page is named […page].tsx, and here’s the code:
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} />
</>
);
}
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?
That’s working, but how do I change the home page then?
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” ?
There is no redirects and this is the code in builder-registry:
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",
},
],
}
);
I get a error as well, because of the routing format being incorrect.
It’s a new one I’ve created today.
Are you using cache-all example? Please refer to below link that may give you a solution
If these steps don’t resolve the issue, we recommend creating a new Next.js project following the steps from the link below:
Yes, I just tried this and it still didn’t work.
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.
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,
