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.

To see the fully updated v9 source code, check out the v9 branch on Github

Optional

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

Firebase Emulator PRO Video

Q&A Chat