Shekinah Tshiokufila
Shekinah TSHIOKUFILA

Shekinah TSHIOKUFILA

Master Building an App with Next.js and Firebase in 5 min

Master Building an App with Next.js and Firebase in 5 min

Master Building an App with Next.js and Firebase

Shekinah Tshiokufila's photo
Shekinah Tshiokufila
·Feb 24, 2022·

4 min read

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

  • Overview
  • Last words
  • References

If you are on this article, you have the desire to learn how to develop an application in Next.js and Firebase or you are simply a curious person who wants to explore these options. This is a good thing because Next.js and Firebase are currently in the web development of essential tools.

In this article, you will learn how to develop an application with Next.js and Firebase. With hours of practice and application of the tips you will find here, I would not doubt for a moment if someone told me that you were the best in web development.

To realize this project, I will use Lottie animations for a good user experience, I will also use Tailwind CSS for the style of my components and React Hot Toast for notifications.

Overview

In this article, we will see:

  • How to implement authentication with Firebase Authentication,
  • How to manage access to pages reserved for authenticated users,
  • Data manipulation with Firebase Firestore.

To implement the above notions, we will develop a Todo App as a didactic model for this article.

1. Let’s start

Next.js is the React framework for production. Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed (as you can read on the Next.js homepage).

To take advantage of all these benefits, you should start 👉 here

Firebase is a backend as a service that makes a set of solutions available to you that just need to be interconnected with our solution. Among these ready-to-use solutions, we note: Authentication, Databases, Storage and many others.

To take advantage of all these benefits, you should start 👉 here

2. Implementation

For our project, we will use yarn to create the project and add the different dependencies of our project. Our project will be done in TypeScript!

1️⃣ creation of the project : yarn create next-app --typescript

2️⃣ Installation of firebase : yarn add firebase

a. Firebase Configuration

In the file that comes just below, I present the initialization of firebase and as you will see, I export the instance of Firebase that will be reused for Authentication and data manipulation with Firestore.

b. Authentication with Firebase and Next.js

1️⃣ I start by creating the service that implements the authentication logic with Firebase. To do this, I use three functions:

  • one for the connection with Google,
  • another one for anonymous authentication,
  • a last one for logout.

2️⃣ Once this is done, we create the connection page to achieve the connection in our application. To achieve this, I create : a component for the connection as well as the connection page that will be rendered.

  • then, I created an authentication context that allows me to keep and share the state of the user in the whole application through the provider that is added to the root of the app.
  • finally, I created a component that checks if the user is logged in when requesting access to protected resources. This component allows to redirect him to the login page when he is not and to the requested resource when he is.

components/AuthCheck.tsx 👇

Now components will have AuthCheck as a parent component to ensure that protected resources are only accessible when logged in. I will show you this in the following lines.

c. Data manipulation with Firestore and Next.js.

With authentication done, let’s move on to the implementation of the other pages in the application and their services.

screenshot1.png

1️⃣ Let’s create a service that creates, retrieves and modifies data from Firebase.

firebase/firestore.ts 👇

2️⃣ Let's create a service that uses the functions of the previous one for tasks collection.

firebase/task.firestore.ts 👇

3️⃣ Now let’s create the pages and components for the rest of our application.

  • For to get all tasks : pages/todo/index.tsx, components/Todos.tsx, components/Todo.tsx, components/EmptyTodo.tsx and components/Loading.tsx.
  • For to create a task and to mark it done : pages/todo/new-task.tsx and components/NewTodo.tsx
  • For to see detail of a task : pages/todo/detail/[todoId].tsx and components/SingleTodo.tsx

Last words

Throughout this article, we have talked about how to master Firebase development with Next.js. We explored :

  • How to implement authentication with Firebase Authentication,
  • How to manage access to pages reserved for authenticated users,
  • Data manipulation with Firebase Firestore.

There are many other things you can do with Firebase, you can find them on the official Firebase website.

I hope this article has given you more clarity on the subject. Don’t hesitate to see the source code or to see the demo 😊.

Thanks for reading this article, I’m looking forward to your feedback.

References

 
Share this