Currently, I am in the process of setting up a small Next.js application to work with a Firebase database (including storage).
One issue I encountered is that the Firebase app instance is located in the server components because I was concerned about sending sensitive 'credentials' (such as the API key) to the client.
However, I discovered that managing the app instance's lifetime in the server components was problematic, as it seemed to be inconsistent or difficult to control (despite having a singleton there). This led me to recreate the instance on every request.
Realizing the shortcomings of my initial setup, I made the decision to move the Firebase instance to the client components instead.
Yet, this approach raises the concern of exposing the API key, app id, and other sensitive information to the client. I am now seeking guidance on the proper and secure way to handle this situation.
(I have come across resources suggesting the use of 'env variables' prefixed with NEXT_PUBLIC to pass these details to the client, which is the method I ultimately adopted.)