Hello everyone, my name is Rohit, and welcome
to another Next.js video. In this video, I will show you how to data to the Firebase
realtime database using Next.js and React Applications. If you face any issues,
feel free to reach out to me, you can comment here or DM me on my social handles. So,
without any further delay. Let’s get started! I started a next.js app and these are
my default settings for this project. My project name is firebaseapp. Next,
navigate to the firebaseapp directory and install the firebase package using
the command: npm install firebase. Next, I opened the app in visual studio
code and without writing any code, I ran this project using the command: npm run dev Ok! This is the default rendering of the
next.js app. But before writing any code, we will setup our firebase account. Go to the firebase.google.com and click
on Get Started. Then add your project and give your project a name. Follow the
video to setup your firebase account. Now, click on the web and register your app. We will use this config
keys in our Next.js app. So, inside the app directory, create a
file and name it as firebaseConfig.js Copy this and paste it here. Modify the default config keys for
the firebase realtime database. Now, inside the build section, click
on the firebase realtime database. Click on Create database and choose your
database location. I also read the rules, here I wanna go with the test mode so,
select the test mode and click on enable. We are all set!! But we have to use this
databaseURL inside the firebaseConfig.js file. So, copy the URL and paste
it into the firebaseConfig.js file —--
Now, head back to the page.js file and let’s write some code
to add data to the realtime firebase DB. First, we will import all the required components. The
first line of the code is ‘use client’. This is a directive that tells Next.js to only run this
code on the client-side, not on the server-side. Next, we set up two state variables, title
and subtitle, using the useState hook. These variables will be used to capture the
input values from the user. The state allows us to keep track of changes and
update the user interface accordingly. The handleAddData function is where the
magic happens. When the user clicks the "Add Data" button, this function
is triggered. Here's how it works: We obtain a reference to the 'users'
node in our Firebase database using ref. We create a new data reference by
calling push on the usersRef. This generates a unique key for our data.
We then use set to write the data into the database. In this case,
we're storing the "title" and "subtitle" that the user has entered.
After successfully adding the data, we clear the input fields and display
a success message using alert. Finally, we have the user interface
elements. We're using a main container to structure our page and provide
some basic styling. There's a title, two input fields for the "title" and "subtitle,"
and a button to trigger the data submission. Now, we are all set!! Let me
add some data to our database. But it’s not working!! After checking the console. I missed importing the set
component. So, import it. Now, it’s working as expected!!! That’s it. You now know how to add data
to the Firebase realtime database. Thanks for watching. See you in the next next.js video.
