How to Use Firestore with Next.js: Simple Setup and Example

To use Firestore with Next.js, install Firebase SDK, initialize Firebase in a module, and import Firestore functions where needed. Use getFirestore() to access Firestore and perform reads or writes inside your Next.js components or API routes.

Syntax

First, install Firebase SDK with npm install firebase. Then create a Firebase config file to initialize your app and Firestore. Import initializeApp and getFirestore from Firebase SDK. Use getFirestore(app) to get Firestore instance.

Use Firestore functions like collection(), getDocs(), and addDoc() to read and write data.

javascript

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs, addDoc } 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);

// Example: get all documents from a collection
async function getData() {
  const querySnapshot = await getDocs(collection(db, 'your-collection'));
  querySnapshot.forEach((doc) => {
    console.log(doc.id, '=>', doc.data());
  });
}

Example

This example shows how to fetch and display Firestore documents in a Next.js page using React hooks. It initializes Firebase, fetches data from a collection, and renders it.

javascript

import { useEffect, useState } from 'react';
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } 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 default function FirestoreExample() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const querySnapshot = await getDocs(collection(db, 'items'));
      const dataList = [];
      querySnapshot.forEach((doc) => {
        dataList.push({ id: doc.id, ...doc.data() });
      });
      setItems(dataList);
    }
    fetchData();
  }, []);

  return (
    <div>
      <h1>Firestore Items</h1>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Output

<div>
  <h1>Firestore Items</h1>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

Common Pitfalls

1. Not initializing Firebase only once: Initializing Firebase multiple times causes errors. Use a singleton pattern or check if an app is already initialized.

2. Using Firestore on the server without proper environment setup: Firestore client SDK is for browser or client-side. For server-side in Next.js API routes, use Firebase Admin SDK instead.

3. Forgetting to secure Firestore rules: Open rules can expose your data. Always configure Firestore security rules properly.

javascript

/* Wrong: Initializing Firebase inside a component causes multiple initializations */
import { initializeApp } from 'firebase/app';

export default function Page() {
  const app = initializeApp(firebaseConfig); // BAD: runs on every render
  // ...
}

/* Right: Initialize Firebase once in a separate module */
// firebaseConfig.js
import { initializeApp, getApps } from 'firebase/app';

const firebaseConfig = { /* your config */ };

const app = !getApps().length ? initializeApp(firebaseConfig) : getApps()[0];

export default app;

Quick Reference

• Install Firebase SDK: npm install firebase
• Initialize Firebase once per app
• Use getFirestore(app) to get Firestore instance
• Use Firestore functions like collection, getDocs, addDoc
• Use Firebase Admin SDK for server-side Firestore access in Next.js API routes

Key Takeaways

Initialize Firebase only once to avoid errors in Next.js.

Use Firebase client SDK for browser-side Firestore access.

Use Firebase Admin SDK for server-side Firestore in Next.js API routes.

Secure Firestore with proper security rules to protect data.

Use React hooks like useEffect to fetch Firestore data in components.