Beginner here. I have an app that consumes Here's Geocoding REST API through node.js (w/ express). (My api key is on the server side, so hidden from client.)
But I realized that to add custom markers and other UI to map data, I would also need to use Here's Javascript API. From what I see in the docs, I load the API and implement functions in the client side; but this would mean my api key would be exposed. So, I am fundamentally confused about how to implement this javascript API on the server side (so that api key and code are hidden from client).
Could bundling or SSR with Next.js be the answer?
This may have an obvious answer, but I can find none. Any insight would be appreciated. Thank you
I don't know that particular API, but if a service requires an API key then you should never expose that key to the client in any way.
You can protect it by creating your own API and storing secrets in environment variables:
Use the built-in system for Environment Variables to store secrets and exclude the .env files in your .gitignore. This protects you from committing secrets to to public git repositories (among other advantages).
However, this does NOT protect you from accidentally exposing these secrets to the client. When you use environment variables in client side code, they will be embedded in the bundle and shipped to the client. Next.js actually protects you from making this mistake by making env variables only available to the server environment unless you specifically expose them by prefixing them with NEXT_PUBLIC_.
Instead, create your own backend and use the keys only there. You can use next.js API routes to do that easily. That way the client can make requests to your own API, which then can make the actual call to the Here API using the secret key. Creating your own backend also allows you to implement additional protection by limiting what the users can do, or with user authentication.