Firebase with Next.js - Mini Project: Build & Apply

Firebase with Next.js

📖 Scenario: You want to build a simple web app using Next.js that connects to Firebase to store and retrieve user messages.This app will let users submit messages, and you will save them in Firebase Firestore.

🎯 Goal: Create a Next.js app that initializes Firebase, connects to Firestore, and allows adding and reading messages.

📋 What You'll Learn

Initialize Firebase in a Next.js project with the given config

Create a Firestore collection called messages

Add a message document with a text field

Read all messages from Firestore and display them

💡 Why This Matters

🌍 Real World

Many web apps use Firebase with Next.js to quickly build scalable, server-rendered apps with real-time data storage.

💼 Career

Understanding Firebase integration with Next.js is valuable for frontend and full-stack developers working on modern web applications.

1

Initialize Firebase in Next.js

Create a file called firebaseConfig.js and export a constant firebaseConfig with these exact values: apiKey: 'AIzaSyA-ExampleKey12345', authDomain: 'your-app.firebaseapp.com', projectId: 'your-app', storageBucket: 'your-app.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:abcdef123456'.

Firebase

# Your code here to create firebaseConfig.js with the exact firebaseConfig object

Hint

This file holds your Firebase project settings. Use exact keys and values.

2

Set up Firebase app and Firestore

Create a file called firebaseClient.js. Import initializeApp from firebase/app and getFirestore from firebase/firestore. Import firebaseConfig from ./firebaseConfig. Initialize Firebase app with initializeApp(firebaseConfig) and export a constant db as the Firestore instance from getFirestore(app).

Firebase

export const firebaseConfig = {
  apiKey: 'AIzaSyA-ExampleKey12345',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

// Your code here to initialize Firebase app and export Firestore db

Hint

Use Firebase functions to initialize app and Firestore. Export Firestore as db.

3

Add a message to Firestore

In a Next.js API route file called pages/api/addMessage.js, import db from ../../firebaseClient and collection, addDoc from firebase/firestore. Create an async function handler that adds a document with { text: 'Hello Firebase!' } to the messages collection using addDoc. Export handler as default.

Firebase

export const firebaseConfig = {
  apiKey: 'AIzaSyA-ExampleKey12345',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { firebaseConfig } from './firebaseConfig';

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

// Your code here to create API route handler to add a message document

Hint

This API route adds a message document to Firestore. Use addDoc with collection(db, 'messages').

4

Read and display messages in Next.js page

In pages/index.js, import db from ../firebaseClient and collection, getDocs from firebase/firestore. Create an async function getServerSideProps that fetches all documents from the messages collection using getDocs. Return the messages as props with their id and text. In the default exported component, receive messages as props and render an unordered list showing each message's text.

Firebase

export const firebaseConfig = {
  apiKey: 'AIzaSyA-ExampleKey12345',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { firebaseConfig } from './firebaseConfig';

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

import { collection, addDoc } from 'firebase/firestore';

export default async function handler(req, res) {
  try {
    await addDoc(collection(db, 'messages'), { text: 'Hello Firebase!' });
    res.status(200).json({ message: 'Message added' });
  } catch (error) {
    res.status(500).json({ error: 'Failed to add message' });
  }
}

// Your code here to create getServerSideProps and default component to display messages

Hint

Use getServerSideProps to fetch messages from Firestore and pass them as props. Render them in a list.

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