Real-Time Data Updates with Firebase Firestore in Next.js

Real-time data has become a cornerstone of modern web applications, enabling instant updates and dynamic user experiences. Firebase Firestore is a powerful NoSQL database that provides real-time data syncing, making it an excellent choice for projects requiring live updates.

In this tutorial, we’ll guide you through integrating Firebase Firestore with a Next.js application to display real-time data updates. By the end, you’ll have a fully functional example of a real-time messaging app, a perfect starting point for your own projects.

Setting Up Firebase

Before we dive into coding, let’s get Firebase ready for our project:

Create a Firebase Project:

Enable Firestore:

Generate Configuration Keys:

Installing Dependencies

Next, let’s set up Firebase in our Next.js project:

Install Firebase:

npm install firebase

Configuring Firebase in Next.js

To connect Firebase to our Next.js app, create a dedicated firebase.js file for configuration:

// firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

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

export { db };

This setup ensures Firestore is initialized and ready to use throughout your app.

Setting Up Firestore Data

Now that Firebase is configured, we’ll prepare some sample data:

Create a Collection:

Add Documents:

{
  "text": "Hello, world!",
  "timestamp": "2025-01-26T12:00:00Z"
}

Displaying Real-Time Data in a Next.js Component

Let’s create a component to display the messages from Firestore in real time:

import { useState, useEffect } from "react";
import { collection, onSnapshot } from "firebase/firestore";
import { db } from "../firebase";

const Messages = () => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const unsubscribe = onSnapshot(collection(db, "messages"), (snapshot) => {
      setMessages(snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() })));
    });
    return () => unsubscribe();
  }, []);

  return (
    <ul>
      {messages.map((message) => (
        <li key={message.id}>{message.text}</li>
      ))}
    </ul>
  );
};

export default Messages;

This component uses Firestore’s real-time listener (onSnapshot) to keep the messages state updated as changes occur in the database.

Styling the Component

To improve the user experience, let’s style the message list using Tailwind CSS:

<ul className="space-y-2">
  {messages.map((message) => (
    <li key={message.id} className="bg-blue-100 p-2 rounded shadow">
      {message.text}
    </li>
  ))}
</ul>

This adds padding, rounded corners, and a subtle shadow to each message, enhancing the visual appeal.

Testing Real-Time Updates

To see real-time updates in action:

Conclusion

By combining Firebase Firestore with Next.js, you can build powerful real-time applications with minimal effort. In this tutorial, we demonstrated how to:

Real-time data opens up a world of possibilities, from chat apps to live dashboards. Explore Firestore further to implement advanced features like querying, offline persistence, and security rules.