We are having trouble connecting to your site - I see my website in the builder

[jayman]

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/ 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

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 */}
<BuilderComponent model=“page” content={page || undefined} />
</>
);
}

[manish-sharma]

Hello @jayman,

Greetings and welcome to the 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,

[jayman]

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.

[manish-sharma]

Hello @jayman,

Could you share the screenshot of your current setup and [[…page]].tsx code?

[jayman]

Hello @manish-sharma

sure thing here it is,

[manish-sharma]

Hello @jayman,

This doesn’t help much, could you please help us with the entire code from [[…page]].tsx?

[luisg05]

I switched from Safari to Chrome and now my preview works. Try that

[jayman]

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 */}
<BuilderComponent model=“page” content={page || undefined} />
</>
);
}

[manish-sharma]

Hello @jayman,

We are still not able to reproduce this issue on our end.

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

  return (
    <>
      <Head>
        <title>{page?.data?.title}</title>
      </Head>
      {/* Render the Builder page */}
      <BuilderComponent model="page" locale="en-fr" content={page || undefined}   />
    </>
  );
}