Hello everyone, my name is Rohit, and welcome
back to another on Next.js video. In this video, we will see how to fetch data
from the Firebase realtime database using React and Next.js Applications. If you face any issues, feel free to reach
out to me, you can comment here or DM me on my social handles. The links are in the description below. 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, let me quickly add some data to our database. We will fetch this data using our Next.js
application. My root node name is users. Now, head back to the page.js file and delete
the default code. I will add a header first. 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. Inside the Home component, we are declaring
a state variable called users, which will store an array of user objects that we will
fetch from the database. We are also declaring a setter function called
setUsers, which will allow us to update the state variable. Next, we are using the useEffect hook to perform
a side effect when the component mounts. The useEffect hook takes two arguments: a
callback function and an array of dependencies. The callback function will run only once when
the component mounts, because we have passed an empty array as the second argument. This means that we don’t want to run the
callback function again when any of the state variables or props change. Inside the callback function, we are creating
a reference to a node in our database called ‘users’. We are using the ref function from firebase/database,
which takes two arguments: the database object and the path to the node. Next, we are using the get function from firebase/database,
which takes a reference as an argument and returns a promise. The promise will resolve with a snapshot object,
which contains the data at that reference. The promise will reject with an error object
if there is any problem with reading the data. We are using the then method of the promise
to handle the resolved value. Inside this callback function, we are checking
if the snapshot exists by using the exists method of the snapshot object. If the snapshot exists, we are using the val
method of the snapshot object to get the data as a JavaScript object. Next, we are using the Object.entries method
to convert the object into an array of key-value pairs. Next, we are using the map method of the array
to transform each subarray into a new object. The map method takes a callback function as
an argument, which receives each subarray as a parameter and returns a new value. Inside this callback function, we are using
array destructuring to assign each element of the subarray to a variable. The first element is assigned to a variable
called id, which represents the unique identifier of each user in our database. The second element is assigned to a variable
called data, which represents the user data such as title and subtitle. Next, we are using object spread syntax to
create a new object that contains both id and data properties. Next, we are using setUsers function to update
our state variable with usersArray value. If the snapshot does not exist, we are using
console.log method to print ‘No data available’ in the browser’s console. We are using catch method of promise to handle
rejected value. The catch method takes one argument: either
an error object or a function that receives error object as parameter. Inside this catch block, we are using console.error
method to print error in the console. Next, we are using the map method of users
array to render each user card. The map method takes a callback function as
an argument, which receives each user object as a parameter and returns a JSX element. Inside this callback function, we are using
a div element with some classes to create a card for each user. We are also using key prop to assign a unique
identifier for each card, which helps React to optimize the rendering process. Now, we are all set!! But my firebase data is not rendering here. I have committed some mistakes I guess. Upon checking I realized that the spelling
of the databaseURL is not correct. That’s why the data is not rendering. So, fix this, and now our data is showing. That’s it. Now you know how to fetch data from the Firebase
realtime database using react and nextjs application. Thanks for watching. See you soon in the next next.js video.
