Hello everyone, my name is Rohit, and welcome back to
another video on Next.js. In this video, we will integrate Firebase with the Next.js. we
will also fetch data from the Firestore database. Feel free to comment if you face any issues.
You can also DM me on social media handles. The links are below in the description. 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 next.js project name is nextfirebase. Next, I navigate to the
nextfirebase directory in the terminal window. Here We will install the Firebase package
using the command npm install Firebase Next, I opened the app in Visual Studio
Code. But before writing any code, let's run this project using
the command npm run dev. Ok! This is the default rendering of the
next.js app. But before writing the code, I am going to set up our Firebase account. For this, search for Firebase and click on the
link. You just have to follow the video to set up a Firebase account for the web. The Firebase
developer team has made this really easy for us. Now, click on Web. Give your application a name. To connect our Next.js app, we have to use the
Firebase config code in our project. To do this, head over to the app directory
and create a file named firebaseConfig.js. Copy and paste the Firebase config
code into the firebaseConfig.js file. We are not going to use Firebase Analytics,
so remove the Firebase Analytics code line. In the Build section, click on Firestore Database. Click on Create Database. If you are
developing your app for production, read the rules. For now, I am just testing
the app, so I will select the Test Mode. Select the Firestore database location.
I am from India, so I will select Mumbai. Wait for a few seconds and
your database will be ready. We are going to use Firestore, so
inside the firebaseConfig.js file, import the Firestore database
and add it to our project. A few moments ago, we saw the default
rendering of the Next.js app. These code lines are the reason behind that. But,
we are going to delete this default code, because our goal is to fetch and render
data from the Firestore database. Here, I am going to add a header first.
—--------------------- The first line of the code says
‘use client’. This is a directive that tells Next.js to run this code on
the client side, not on the server side. Next, just import all the
required components and objects Next, we define an async function
called fetchDataFromFirestore. This function will do the actual work
of fetching data from Firestore. Inside this function, we use the getDocs function and pass it the collection function
with two arguments: db and “users”. This means we want to get all the documents from the
“users” collection in our Firestore database. The getDocs function returns a promise, which we
await. The promise resolves to a querySnapshot object, which contains information
about the documents in the collection. We then create an empty array called data. We will use this array to store the
data we get from Firestore. We use the forEach method on the querySnapshot
object to loop through each document in the collection. For each document, we push an object
to the data array. The object has two properties: id and …doc.data(). The id property is
the unique identifier of the document, which we get from doc.id. The …doc.data()
property is a spread operator that copies all the fields and values from
the document data into the object. After we finish looping through all the documents,
we return the data array from the function. Inside Home component, we use the useState hook
to create a state variable called userData and a setter function called setUserData. We
initialize userData with an empty array. We also use the useEffect hook to run some
code when the component mounts. The useEffect hook takes two arguments: a callback
function and an array of dependencies. The callback function is where we fetch
data from Firestore and update our state variable. The array of dependencies
is empty, which means we only want to run this code once when the component
mounts, not every time it re-renders. Inside the callback function, we define
another async function called fetchData. This function calls our fetchDataFromFirestore
function and awaits its result. Then it uses the setUserData function to update our state
variable with the data we get from Firestore. We call this fetchData function
inside our callback function. Finally, we return some JSX code that renders our web page. We use some Tailwind
CSS classes to style our elements. we have a div element that contains our user
data. We use the map method on our userData array to loop through each user object
and render some elements for each user. For each user, we have another
div element with a key attribute that is equal to user.id. This helps React
identify each user and optimize rendering. Inside this div element, we have three p
elements that display user.name, user.age, and user.bio respectively. We
use some Tailwind CSS classes to make user.name bold and large,
and user.age and user.bio normal. And that’s it! That’s how you fetch data from
Firebase Firestore and display it on a web using React and Next.js. I hope you learned
something new today. If you liked this video, then give it a thumbs up and subscribe
to my channel for more content like this. Thanks for watching and see you
soon in the next next.js video.
