Firebase with Next.js - Commands & Configuration

Introduction

Firebase is a service that helps you add backend features like databases and user login to your website. Next.js is a tool to build websites with React. Using Firebase with Next.js lets you easily add powerful features to your website without managing servers.

When you want to add user login and authentication to your Next.js website.

When you need a real-time database to store and show data instantly on your site.

When you want to host your Next.js website and backend together with minimal setup.

When you want to send notifications or messages to users from your website.

When you want to quickly add cloud functions to handle backend logic without servers.

Config File - firebase.json

firebase.json

{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

This file tells Firebase how to host your Next.js website.

• hosting.public: The folder with your built website files.
• ignore: Files and folders Firebase should skip.
• rewrites: Sends all requests to your main page so Next.js can handle routing.

Commands

This command installs the Firebase library so your Next.js app can use Firebase features.

Terminal

npm install firebase

Expected Output

+ firebase@9.22.1

added 1 package from 1 contributor and audited 1 package in 1.234s

found 0 vulnerabilities

Logs you into your Firebase account so you can manage your projects and deploy your app.

Terminal

npx firebase login

Expected Output

✔  Success! Logged in as [e-mail]

Starts Firebase setup for hosting your Next.js website. You choose your project and set the public folder.

Terminal

npx firebase init hosting

Expected Output

=== Hosting Setup ===

? Select a default Firebase project for this directory: example-project

? What do you want to use as your public directory? out

? Configure as a single-page app (rewrite all urls to /index.html)? Yes

Firebase initialization complete!

Builds your Next.js website and exports it as static files in the 'out' folder for Firebase hosting.

Terminal

npm run build && npm run export

Expected Output

info  - Creating an optimized production build...

info  - Exporting static pages

Export successful. Files written to out/

Uploads your built website files to Firebase so your site is live on the internet.

Terminal

npx firebase deploy

Expected Output

=== Deploying to 'example-project'...



i  deploying hosting

i  hosting[example-project]: beginning deploy...

✔  hosting[example-project]: deployed hosting files



✔  Deploy complete!



Project Console: https://console.firebase.google.com/project/example-project/overview

Key Concept

If you remember nothing else from this pattern, remember: Firebase hosting serves your built Next.js site files, and Firebase tools help you build, login, and deploy easily.

Common Mistakes

Not running 'npm run build' and 'npm run export' before deploying.

Firebase needs the built static files in the 'out' folder to host your site. Without building, there are no files to upload.

Always run 'npm run build && npm run export' to prepare your site before 'firebase deploy'.

Setting the wrong public directory during 'firebase init hosting'.

If the public directory is not 'out', Firebase won't find your built site files and deployment will fail or show an empty site.

Set the public directory to 'out' when asked during Firebase hosting initialization.

Skipping 'npx firebase login' before deploying.

Without logging in, Firebase CLI cannot access your projects and deployment will fail.

Run 'npx firebase login' once before deploying to authenticate your CLI.

Summary

Install Firebase library to use its features in your Next.js app.

Build and export your Next.js site to static files in the 'out' folder.

Initialize Firebase hosting with 'out' as the public directory.

Login to Firebase and deploy your site files to make your website live.

Practice

1. What is the main purpose of integrating Firebase with a Next.js application?

easy

A. To add backend features like database and user authentication easily

B. To replace Next.js routing with Firebase functions

C. To convert Next.js into a mobile app framework

D. To remove the need for React components in Next.js

Solution

1. Step 1: Understand Firebase role

   Firebase provides backend services such as database and authentication that can be added to frontend apps.

2. Step 2: Understand Next.js role

   Next.js is a frontend framework for React apps, which can use Firebase to add backend features.

3. Final Answer:

   To add backend features like database and user authentication easily -> Option A

4. Quick Check:

   Firebase adds backend features to Next.js apps = C [OK]

Hint: Firebase adds backend features to frontend apps [OK]

Common Mistakes:

• Thinking Firebase replaces Next.js routing
• Confusing Firebase with mobile app frameworks
• Assuming Firebase removes React components

2. Which of the following is the correct way to initialize Firebase in a Next.js project?

easy

A. import { initializeApp } from 'firebase/app'; const app = initializeApp(firebaseConfig);

B. const app = new Firebase(firebaseConfig);

C. firebase.initialize(firebaseConfig);

D. import firebase from 'firebase'; firebase.init(firebaseConfig);

Solution

1. Step 1: Check Firebase v9+ syntax

   Firebase modular SDK uses 'initializeApp' imported from 'firebase/app'.

2. Step 2: Verify correct usage

   import { initializeApp } from 'firebase/app'; const app = initializeApp(firebaseConfig); correctly imports and calls initializeApp with config.

3. Final Answer:

   import { initializeApp } from 'firebase/app'; const app = initializeApp(firebaseConfig); -> Option A

4. Quick Check:

   Use initializeApp from 'firebase/app' = B [OK]

Hint: Use modular import and initializeApp for Firebase v9+ [OK]

Common Mistakes:

• Using old Firebase namespace syntax
• Calling non-existent methods like firebase.init
• Creating Firebase instance with 'new' keyword

3. Given this Next.js Firebase code snippet, what will be logged if the user is not signed in?

import { getAuth, onAuthStateChanged } from 'firebase/auth';
const auth = getAuth();
onAuthStateChanged(auth, user => {
  if (user) {
    console.log('User ID:', user.uid);
  } else {
    console.log('No user signed in');
  }
});

medium

A. Error: user is null

B. User ID: undefined

C. No user signed in

D. Nothing will be logged

Solution

1. Step 1: Understand onAuthStateChanged behavior

   This function triggers callback with user object if signed in, or null if not.

2. Step 2: Analyze code branches

   If user is null (not signed in), else branch logs 'No user signed in'.

3. Final Answer:

   No user signed in -> Option C

4. Quick Check:

   Null user triggers else branch = A [OK]

Hint: Null user means else branch runs [OK]

Common Mistakes:

• Assuming user object is always defined
• Expecting an error when user is null
• Thinking nothing logs if no user

4. You wrote this code to fetch data from Firestore in Next.js but get an error:

import { getFirestore, collection, getDocs } from 'firebase/firestore';
const db = getFirestore();
async function fetchData() {
  const querySnapshot = await getDocs(collection(db, 'users'));
  querySnapshot.forEach(doc => {
    console.log(doc.data());
  });
}
fetchData();

What is the most likely cause of the error?

medium

A. doc.data() is not a function

B. The collection name 'users' is invalid

C. getDocs does not support async/await

D. Firebase app was not initialized before calling getFirestore()

Solution

1. Step 1: Check Firebase initialization requirement

   Firestore requires Firebase app to be initialized before calling getFirestore().

2. Step 2: Analyze other options

   'users' is valid collection name; getDocs supports async/await; doc.data() is valid method.

3. Final Answer:

   Firebase app was not initialized before calling getFirestore() -> Option D

4. Quick Check:

   Initialize Firebase app before Firestore = D [OK]

Hint: Always initialize Firebase app before Firestore calls [OK]

Common Mistakes:

• Skipping Firebase initialization
• Misunderstanding async/await with getDocs
• Assuming collection names cause errors

5. You want to secure a Next.js page so only authenticated users can access it using Firebase Auth. Which approach is best?

hard

A. Check user authentication only in getStaticProps and serve static content

B. Use Firebase Admin SDK on server side to verify user token in getServerSideProps

C. Use Firebase Auth on client side and redirect unauthenticated users to login page

D. Store user password in cookies and check it manually in the page component

Solution

1. Step 1: Understand authentication in Next.js

   Client-side checks can be bypassed; server-side verification is more secure.

2. Step 2: Use Firebase Admin SDK in getServerSideProps

   This allows verifying user tokens securely on server before rendering page.

3. Step 3: Analyze other options

   getStaticProps runs at build time, not per request; storing passwords in cookies is insecure.

4. Final Answer:

   Use Firebase Admin SDK on server side to verify user token in getServerSideProps -> Option B

5. Quick Check:

   Server-side token verification = A [OK]

Hint: Verify user token server-side with Firebase Admin SDK [OK]

Common Mistakes:

• Relying only on client-side auth checks
• Using getStaticProps for auth checks
• Storing passwords insecurely in cookies