Unhandled RunTime error : Error Fetching content Failed, expected apikey to be defined instead got null

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

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.