How can I hide my backend api keys with app dir`s api and server components

[teddybee]

I wrote a little proxy route in app dir api part that putthe api keys to the requests and forward it to the backend server.
Unfortunately I can`t compile production code this nextjs app, because of the limitations of app/api and server components. (nor local nor on vercel)

Is there a solution for this issue or other methods to keep my sensitive api keys away from NEXT_PUBLIC_ env variables?

[icyJoseph]

Note that Server Components and API routes, are all server side anyway, so nothing is being exposed to the client side, at least, not by accident. I understand you might have your own reasons to do as you want to do, so let's explore that avenue.

For this particular case... maybe you want to have your proxy route separated, or, pull off a sleight of hand, and bootstrap it, by first deploying your app with the proxy route and nothing else, and then for production builds you reach for that already deployed route.

It is a chicken and the egg kind of problem. For you to be able to proxy the requests, you need a route, so first deploy that route. And, at build time, you'd be working with the last deployed version of your proxy.

It is messy though, and it implies an extra jump over the internet. Alternatively, you could deploy the proxy route separately in another project.

[teddybee]

Unfortunately I call the api from client side as well. I can`t resolve everything with server components.
Probably I will run the proxy in a separate(third) service.

[avenali5]

hey there, I'm running into the same issue now, I need to hide the api keys on client components as well. May i know how did you solve it?

[icyJoseph]

Most likely did a route handler "proxy", that forwards the request to the 3rd party, by including the API KEY in which ever form it is necessary.