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 application. we will also add data to the Firestore database using nextjs
application. Feel free to comment here or DM me on my social media if you face any issues. 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 addDataToFirestore. This function takes three parameters: name, email, and message. These are the values that we
want to store in our Firestore document. Inside this function, we use a try-catch
block to handle any errors that might occur while adding data to Firestore. In
the try block, we use the addDoc function and pass it two arguments: collection(db,
“messages”) and an object with name, email, and message properties. This means
we want to add a new document to the “messages” collection in our Firestore
database with the data we provide. The addDoc function returns a promise, which we
await. The promise resolves to a docRef object, which contains information about
the newly created document, such as its id. We log this id to
the console for debugging purposes. We also return true from the function, which
indicates that the data was added successfully. In the catch block, we catch any error that
might occur while adding data to Firestore. We log this error to the
console for debugging purposes. We also return false from the function, which indicates that the data
was not added successfully. Inside Home component, we use the useState
hook to create three state variables: name, email, and message. We also create three setter
functions: setName, setEmail, and setMessage. We initialize these state
variables with empty strings. We also define a handleSubmit function that will
handle the form submission event. This function takes an event object as a parameter and prevents
the default behavior of reloading the page. Inside this function, we call our
addDataToFirestore function and pass it our state variables as arguments. We await its
result and store it in a variable called added. We check if added is true or false. If it is true, it means that our data was added successfully
to Firestore. In that case, we clear our form fields by setting our state variables to
empty strings using our setter functions. We also show a success message
using the alert function. If added is false, it means that our data was not added successfully to Firestore. In
that case, we don’t do anything else. Finally, we return some JSX code
that renders our web page. We use some Tailwind CSS classes to style our elements. we have a form element that contains our web
form. We pass our handleSubmit function as an onSubmit prop to this element. This
means that when we submit this form, our handleSubmit function will be executed. Inside the form element, we have four div elements that
contain our form fields and buttons. The first div element contains a label element
and an input element for entering our name. The label element has a htmlFor prop that
matches the id prop of the input element. This helps us associate the label with
the input for accessibility purposes. The input element has a type prop of “text”, which
means it accepts text input. It also has a value prop that is equal to our name state variable and
an onChange prop that takes an anonymous function that sets our name state variable to whatever
we type in the input using setName function. The fourth div element contains a
button element that submits our form. The button element has a type prop of
“submit”, which means it triggers the form submission event. It also has some Tailwind
CSS classes to make it look nice and interactive. And that’s it! That’s how you add data to
Firestore database using a simple web form with React and Next.js. I hope you learned
something new today. If you liked this video, please give it a thumbs up and subscribe
to my channel for more videos like this one. Thank you for watching and see
you soon in the next next.js video.
