NextJS + Firebase Tutorial 🔥 // Hooks, Firestore, Authentication & Functions!

Source code for this project:

Connect with me:

Chapters:
0:00 - Introduction
0:35 - What We Will Create
1:59 - Creating Next JS Project
2:15 - Setting Up Typescript (optional)
2:40 - Cleaning Up Starter Code
2:56 - Installing Firebase Packages
3:20 - Creating Firebase Project
4:06 - Configuring Next JS with Firebase
4:44 - Firebase Authentication
8:05 - Firestore Database
10:46 - Firebase Cloud Functions
14:12 - Displaying Data on the UI
15:43 - Outro - Subscribe!

Using Next JS And Firebase, we will:
- Set up Next JS with Firebase and Firebase Hooks
- Set up Next JS Firebase Authentication with GitHub
- Sett up Real-time database updates with Firestore and Next JS
- Create Serverless Functions with Firebase Cloud Functions

Firebase is an incredible tool to get up and running with complex features of a full-stack application. With minimal effort required, we can create a full-stack web application with a live-updating database, an authentication system and cloud functions with ease.

If you're looking to build a SaaS application or a web-application at lightning pace, Firebase and Next JS provide an amazing toolset to get off the ground and into production with an incredible developer experience.

[JarrodWatts]

Hey Everyone! Important note for those starting out a new Firebase project below.
This video is using the v8 version of Firebase. Google has recently released a v9 version of Firebase that is more modular and optimized.
You can still follow along this tutorial, a lot of it is still relevant. However some of the code snippets you'll find will be slightly different/outdated, with the new v9 version of Firebase.

[outis]

Honestly mate this is so good, a fast and concise video I can revisit whenever I want to start a new Next/Firebase project.
Personally I love this fast informative videos like Fireship does but I imagine they require a lot of editing so don't feel pressure to make all of them like this

[alexwarendh]

Jarrod! Amazing video! I'm starting to find "my" stack and this is spot on.

[cryptodev]

I get a SyntaxError: Cannot use import statement outside a module error when deploying functions

[codelabspro]

Getting error - Module not found: Can't resolve firebaseui/StyledFirebaseAuth when I follow these steps

[RockstarProgrammer]

This is already out of date in 2023:
error - TypeError: Cannot read properties of undefined (reading 'apps')

[jawyor-kt]

why did you use cloud functions for signup? couldn't you "manually" create a document when user clicks on the sign up button?

[williambjork]

@4:14 Are you using some sort of key command/plugin to convert the config values into Next config values when pasting into the env.local file? Or did you just edit the video or am i a complete idiot? (bit of both perhaps)

[isadarc]

Great video! thanks so much! you covered so much in such a little amount of time!

[PshemoPL]

I wonder if exposing envs with api keys to the browser via NEXT_PUBLIC prefix is a good idea. It will be inlined in your JS bundle and thus available for public eyes. Without this prefix it won't work tho.

Any idea how to handle this issue?

[cristiankeibersbardelotto]

good work!
excellent video and explanation!

[saeedet]

Right to the point! amazing. Good job Jarrod! Thanks for sharing it.

[davidlintin]

No idea why so many people add the user to the db client side. Fb functions is the best way to do this well done.

[lonesomesam]

Great video man. Surely helped a lot, thanks.

[JonathanIhm]

This is really great content, this was exactly what I was looking!

[Moochers]

Is there anyway to use this method for a like button? I would need to make the like/unlike unique to the post ID

[shawn-skull]

Ok. Chat GPT solved in a second all the issues about the outdated stuff related to firebase and FirebaseUI for me.
What I don't understand yet is why you used functions to manage the users collection. Is it there any particular reason to do it so? Isn't not secure to handle it like the votes collection?

[Moochers]

How could I do it so that I use one button instead of two. Like a heart button for example. A ternary statement that if the user has "no" you turn it yes and vice versa. edit : I just figured it out. My next problem is that I'm using this method to make likes on some cards. The thing is that each card is unique. This method makes all card have the like... any way I can make them different?

[omfj]

I am a year late, but WOW, what a great tutorial!

[Deepakguptasky]

Wonderful video .If you deploy this app on vercel. Will it work fine ?