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

Need a 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

Need a 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

Need a 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

Need a hint?

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