I want to integrate builder on a landing page in next js.
Screenshots or video link
When I try to integrate the a space in my next application. I see this error on builder.io.
Still I am able to see the contents I am doing the page. I want to understand what is actually causing this error here.
I have followed the same instructions specified in the documentation still I am getting this error on console
This is my folder structure.
Code stack you are integrating Builder with
NextJS
Can you guide me if I am missing anything out here
Hello @SelvaPrasath,
Welcome to the builder.io forum.
Would you be able to share the screenshots of components/builder.tsx and page.tsx?
Sure @manish-sharma ,
please find the code for page.tsx under [[…page]] folder below
Similarly please find the code for builder.tsx below
Attaching the image of layout.tsx as well. tried to initialize the value on Layout.tsx but still I was getting the error.
Given a dummy text in the API_Key. In my actual application I have the correct public key url
Adding image of package.json as well
Hello @SelvaPrasath,
Can you try adding builder.init("YOUR PUBLIC API KEY"); on both the files below imports, see if that resolves the issue.
You can find the Public API Key under Settings → Public API Key
Cool that works. Thank you so much @manish-sharma . What do you think is it ideal to initialise builder multiple times in different pages. I am trying to understand whether will this multiple initialisation adds any overhead to the browser or our application performance.
Hello @SelvaPrasath,
You can rest assured that initializing the builder API key on multiple pages is perfectly acceptable and won’t introduce any unnecessary overhead.
1 Like
Thank you so much @manish-sharma for being real quick and providing solution.
