What is the recommended approach to prevent the Builder.io API key from being exposed in the frontend when using BuilderComponent and builder.get() in a Next.js Client Component?

Technical Questions
2

Hello @Srivathsa1503,

You’re absolutely right to be cautious about exposing API keys in the frontend. Here’s how Builder.io handles this situation and what’s generally recommended:

Builder.io provides two types of API keys:

  • Public (read-only) key: Used to fetch published content from the Builder Content API. It’s safe to expose in the frontend since it only provides access to publicly available, published data. It cannot modify content or access drafts or unpublished models.
  • Private (write) key: Used for server-side operations such as creating, updating, or fetching unpublished content. This key should never be exposed in frontend or client-side code.

So, if you’re using BuilderComponent or builder.get() in a Next.js client component, it’s completely fine to initialize Builder with your public key. This is the expected and supported usage pattern.

That said, here are a few best practices to consider:

  1. Use environment variables:
    Even though the public key is safe, it’s good practice to load it from an environment variable rather than hardcoding it.

    import { builder } from '@builder.io/react'
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!)

  2. Avoid using private keys client-side:
    The private key should only ever be used in server components, API routes, or backend scripts.

  3. Optional – add a proxy layer:
    For tighter control, you can proxy Builder API requests through a Next.js API route. This can help with caching, sanitizing queries, or rate-limiting, but it’s not strictly required for security when using the public key.

In summary, exposing the public (read-only) Builder.io key in client-side code is safe and expected. Just make sure the private key stays strictly on the server.

Thanks,