Firebase Setup Install and configure Firebase in a Next.js project

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.
Get Unlimited PRO Access

OR


*Enrollment provides full access to this course (and updates) for life.

Firebase Setup

command line
npm install firebase react-firebase-hooks

Firebase Lib

Export common Firebase SDKs and utilities.

file_type_js_official lib/firebase.js
import firebase from 'firebase/app'
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';

const firebaseConfig = {
    // your config
};
  
if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig)
}

export const auth = firebase.auth();
export const firestore = firebase.firestore();
export const storage = firebase.storage();

Update September 2021

If you are using Firebase Version 9 you may end up with this error:

TypeError: Cannot read property 'apps' of undefined

Option 1 Downgrade to firebase version 8, by running:

command line
npm install firebase@8.2.1

Option 2 Alternatively, if you wish to continue using firebase version 9, change your imports as follows:

file_type_js_official lib/firebase.js
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';

Check out the Firebase Version 9 Migration guide for additional details on the new Firebase SDKs.

Optional

Consider setting up the Firestore emulator to work with mock data on your local machine.

Firebase Emulator PRO Video

Q&A Chat