Firebase ❤ React ❤ Next — Part 1 of 2

Step 1: Firebase Configuration

Create a Firebase Project

Set a name and Choose Analytics location and Cloud Firestore location

Use the left menu to choose Database

Create Realtime Database

Choose Test Mode. You should probably change this if you want to use this in production. But for now we will just keep it simple.

Note your firebase URL.

To be able to communicate with our newly created database, we will have to have a config file located in our front-end project.

Choose Authentication from the left menu

In the upper right corner, press “Web Setup”

Copy your config to a text file

Step 2: Create a Next App

Lets start off by creating our project directory and installing some dependencies

cd Code
mkdir firebase-react-next
cd firebase-react-nextnpm init -y
npm install --save react react-dom next

Open up VS Code (or your favourite editor)

code .

Your terminal should look something like this:

Open package.json and add update the scripts attribute to the following:

"scripts": {
     "dev": "next",
     "build": "next build",
     "start": "next start"
   }

Your package.json will now look like this:

Now create a folder called “pages” and add a file called “index.js”

Add the following to index.js

And back in your terminal, type:

npm run dev

You can now navigate to http://localhost:3000/ using a browser

Great! We have now generated a Next + React App.

Head back to your terminal, navigate to your project directory and run:

npm install --save firebase

Create a folder in your project called “data” and add a firebase.js file in it.

Add your config parameters in file as follows:

Step 3: Realtime time

Head back to pages/index.js and convert the function based view to a class based view instead.

Let's add a form and some initial state as well.

Your index.js will look something like this now:

Add event handlers to our inputs, as well as providing them with a value derived from our state (this is called a “controlled input”), like this:

Lets add the handleChange method and bind it.

Our file should now look something like this:

Add submit handler

1. Create handleSubmit method

2. Add onSubmit to <form>

3. Bind in constructor

Step 1

Step 2

Step 3

Now lets try posting something from our client to firebase

Thats it for now! In part 2 we will retrieve the data from firebase as well

That's it then

See you next time!