NextJS Builder Integration error

Builder integration error: Looks like the Builder SDK has not been initialized properly (your API key has not been set). Make sure you are calling builder.init(“«YOUR-API-KEY»”); as early as possible in your application's code.

The integration has been done as is shown in the docs, so not sure what’s causing this

Hello @rafill,

Thank you for bringing this to our attention. In order to better assist you, could you kindly provide us with a screenshot of the error you encountered, as well as your directory structure for Next.js? We appreciate your cooperation.


Hello @rafill,

It looks like you’re using the app directory for integration, but the process is a bit different. To proceed, please refer to our documentation for the app router or consider creating a new Next.js project without the app directory and src folder.

Hi Manish,

Yes, I had followed the App router steps. I would rather not have to downgrade by NextJS to make this work

Hi @rafill,

I’m unable to reproduce this error, could you please tell us the node version you are using, package.json file screenshot and your builder API key?

node version: v20.4.0
Builder API key: 974f013379034f90b7881835137d7f94

Hello @rafill,

It appears that the problem is coming from the file components/builder.tsx. Could you please double-check that file?

Additionally, it would be greatly appreciated if you could share your code repository to assist us in reproducing the issue. Thank you very much!

The problem was that I was importing BuilderComponent from @builder.io/react and builder from @builder.io/sdk. So I solved it by importing builder also from @builder.io/react and initializing it.