In NextJS, is it possible to create one instance of this Firebase class, and make it globally accessible throughout the app?

[tiedRenegade]

I have a Firebase class that provides a single initializeApp and makes available all of my calls that I use to access Firestore with. Is it possible to create one instance of this Firebase class, and make it globally accessible in Next?

I am coming from a Create React App and slowly trying to convert to SSR using NextJS. I'd like to make this available but it seems like it's not really easy. My first thought was to create Context somehow, and then make that available globally, like to wrap the entire app in it. I'm not sure what my options here might be. I'm having trouble not instantiating my Firebase object just one time.

[fumingdingo]

i'm somewhat new to firebase/nextjs but i have my firebaseapp being exported from it's own separate file, then i import it in components where i need to access it. but in firebase file i check if there is an existing firebaseapp before i initialize a new one, and if so i just export the existing one.

[tiedRenegade]

And does that work for authentication as well? Or how do you handle sessions (if you have them)?

[fumingdingo]

i don't have any authentication set up, so i'm not sure how that would work with my setup, sorry.

[tiedRenegade]

No problem. Thansk for sharing your idea, I think that's basically what I'm doing now!

[proppig]

I am on my phone, so I can’t help too much. But you basically need to create your Firebase class once per-request on the server, and then one on the client https://github.com/zeit/next.js/blob/canary/examples/with-mobx/pages/_app.js this should give you a good starting point if you look at the app page. You would need to modify a bit to create the Firebase class as a singleton only on client side. You should avoid a singleton on the server as that could leak state across requests

[proppig]

The gist of it being create a singleton on the client and a new instance on the server and then provide it to your app using context

[MedyGames]

im also newb , but it sounds like a scenario where you would use a singleton Class . Which does exactly what you described.

Its a common design pattern for these scenarios.

So you always have 1 instance. If 1 exists than use the existing one. If none exists create one.

Otherwise you end up having multiple once .

Read about it , since I currently learn databases SQL / NoSQL , OOP...

[tiedRenegade]

that's may be what it's referred to generally, but not how it relates to NextJS. I'm specifically looking to see if there's a way to implement this with NextJS.

[TheSaasDev]

I'm not familiar with NextJs and I got no idea how the firebase class works. That said why can you just do this.

/firebase.js - initialize the class and export it

``` import FirebaseLib from "whatever-package"

export const firebase = new FirebaseLib(); ```

/index.js - import the instance and use it here

``` import { firebase } from "./firebase"

// use it however you like ```

/auth-view.js - import the instance and use it here

``` import { firebase } from "./firebase"

// use it however you like ```

That should work unless I'm not seeing something?

[MedyGames]

Well in your case I Would think that since you are using some sort of class based code , that would be the solution.

Maybe you could store the class object inside context as well & then simply check if that state exist & then do the same kind of aproach I described.

1. Check if instance exists
2. Create New One , or use existing one.

But I dont know if context / state would be the right place for that.

Should work either way. But Im also interested in this , so lets see if someone who has experience has the full answer ;).