iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
🔥

Managing Data with Firebase Firestore (v9) and Next.js (Hooks Support)

に公開
tech

Introduction

I decided to write this article because the implementation method has changed with the release of Firebase SDK version 9.

Stack

  • Firebase Authentication (v9)
  • Next.js

What is Cloud Firestore?

In short, Cloud Firestore is a cloud service that allows you to easily build a NoSQL database.

Cloud Firestore is one of the services within the Firebase suite, which is currently managed by Google.

What you can do

You can create and manage databases within your Firebase project.

Pricing

  • Writes: 20,000/day
  • Reads: 50,000/day

These are available for free within the quota.

Pricing | Firebase

Initializing Firebase

To use Firebase, you need to perform an initialization process.

index.js
import Head from 'next/head'

import FirestoreAddButton from '../src/firebase/FirestoreAddButton';
import FirestoreList from '../src/firebase/FirestoreList';

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: 'AIzaSyDf9wc8MCB3H_gmvQbxsuBTo5QCadRu8tg',
  authDomain: 'litely-f6e0d.firebaseapp.com',
  projectId: 'litely-f6e0d',
  storageBucket: 'litely-f6e0d.appspot.com',
  messagingSenderId: '400014490635',
  appId: '1:400014490635:web:47198f41e8f33d603e5b0e',
  measurementId: 'G-9Z9X0FJZRL'
}

console.log('firebase')
initializeApp(firebaseConfig);

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <FirestoreAddButton />
        <FirestoreList />
      </main>
    </div>
  )
}

Adding Data

FirestoreAddButton.js
import { getFirestore, collection, addDoc } from 'firebase/firestore'

const clickButton = () => {
  const id = '003'
  const name = 'test'
  const uid = ''

  const db = getFirestore()
  const docRef = addDoc(collection(db, 'tasks'), {
    uid: uid,
    id: id,
    name: name
  })
  console.log('Document', docRef)
}

function FirestoreAddButton() {
  return (
    <div>
      <button onClick={clickButton}>Add to Firestore</button>
    </div>
  );
}
  
export default FirestoreAddButton;

Referencing Data

FirestoreList.js
import React, { useState, useEffect } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth'
import { getFirestore, collection, query, where, onSnapshot } from 'firebase/firestore'

function FirestoreList() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    const auth = getAuth()
  
    // Triggered when login state changes
    onAuthStateChanged(auth, (user) => {
      if (user) {
        const db = getFirestore()
        // If logged in
        let tasks = []
        const q = query(collection(db, 'tasks'), where('uid', '==', `${user.uid}`))
        onSnapshot(q, (snapshot) => {
          snapshot.docChanges().forEach((change) => {
            if (change.type === 'added') {
              console.log('added: ', change.doc.data())
              tasks.push({
                id: change.doc.id,
                name: change.doc.data().name
              })
              console.log(tasks)
            }
          })
          setTasks(tasks)
        })
      }
    })
  }, []);

  return (
    <div>
      {tasks.map(val => (
        <div key={val.name}>{val.name}</div>
      ))}
    </div>
  );
}
  
export default FirestoreList;

I have summarized the knowledge I gained from developing at home every day for two and a half years! Please take a look if you are interested.

https://doityourself.jp/articles/2026/full-platform-development/

Discussion