Nextjs With Firebase

Theme by Bjcarlson42

|

Updated: 11 Jan 2022

|

120 Stars

NextJS boiler-plate with Google's Firebase integrated. Watch on YouTube: https://youtu.be/SYnu6CLKD70

Categories

Overview

The Next.JS with Firebase Boiler Plate is a sample project that showcases the integration of Next.js and Firebase. It is built using the yarn create next-app command, which provides a basic project structure. The repository includes multiple actions implemented with Firebase, such as authentication, storage, Firestore, and realtime database operations. The project also incorporates React Bootstrap for styling.

Features

• Authentication: Allows users to authenticate using email and password, Google OAuth, Twitter OAuth, and GitHub OAuth.
• Cloud Firestore: Includes examples for reading and writing data in Cloud Firestore, covering all available data types.
• Realtime Database: Allows reading and writing of data in the Firebase Realtime Database.
• Storage: Supports uploading various file types such as videos and images.

Installation

To install the Next.JS with Firebase Boiler Plate, follow these steps:

1. Clone the repository to your local machine.
2. Open the project directory in your IDE or text editor.
3. Install the project dependencies by running the following command in your terminal:

   yarn install
   

4. Create a Firebase project on the Firebase console.
5. Copy your Firebase project configuration details, including the API key, project ID, etc.
6. Update the .env.local file in the project’s root directory with your Firebase configuration details.

   NEXT_PUBLIC_FIREBASE_API_KEY=YOUR_API_KEY
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=YOUR_AUTH_DOMAIN
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=YOUR_PROJECT_ID
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=YOUR_STORAGE_BUCKET
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID
   NEXT_PUBLIC_FIREBASE_APP_ID=YOUR_APP_ID
   

7. Start the development server by running the following command in your terminal:

   yarn dev
   

8. Open your browser and navigate to http://localhost:3000 to see the live website.

Summary

The Next.JS with Firebase Boiler Plate is a sample project that demonstrates the integration of Next.js and Firebase. It provides a basic structure and showcases various Firebase features, such as authentication, Firestore, Realtime Database, and Storage. The project is compatible with Next.js v10+ and Firebase JavaScript v8+. However, it may also work with older versions of the frameworks.