การใช้ Firebase Firestore กับ Next.js

การพัฒนาแอปพลิเคชันที่มีฟีเจอร์แบบเรียลไทม์ หรือระบบที่มีฐานข้อมูลในแบบ cloud ไม่สามารถหลีกเลี่ยงการใช้บริการฐานข้อมูลที่ทันสมัยและรองรับการเชื่อมต่อที่รวดเร็วได้ หนึ่งในตัวเลือกที่ได้รับความนิยมมากคือ Firebase ซึ่งเป็นเครื่องมือของ Google ที่ช่วยให้การพัฒนาแอปพลิเคชันบนมือถือหรือเว็บแอปง่ายขึ้น รวมทั้งการใช้งาน Firestore ฐานข้อมูล NoSQL ที่ทำงานบน Cloud ที่สามารถให้บริการข้อมูลแบบเรียลไทม์ได้

ในบทความนี้เราจะมาทำความเข้าใจวิธีการใช้ Firebase Firestore ร่วมกับ Next.js ซึ่งเป็นเฟรมเวิร์กที่ช่วยให้การพัฒนาเว็บแอปมีประสิทธิภาพสูง และรองรับการทำงานทั้งในฝั่งเซิร์ฟเวอร์และไคลเอนต์ ในขั้นตอนที่ง่ายและรวดเร็ว

Firebase Firestore คืออะไร?

Firebase Firestore เป็นฐานข้อมูล NoSQL ที่รองรับการจัดเก็บข้อมูลในรูปแบบเอกสาร (Document) และคอลเล็กชัน (Collection) ซึ่งข้อมูลใน Firestore สามารถจัดเก็บเป็นชุดของคีย์และค่าที่มีความยืดหยุ่นสูง พร้อมกับการรองรับฟีเจอร์หลายๆ อย่าง เช่น การซิงค์ข้อมูลแบบเรียลไทม์ การปรับขนาดระบบได้ดี การทำงานออฟไลน์ และการเชื่อมต่อกับบริการต่างๆ ของ Firebase

ทำไมต้องใช้ Firebase Firestore กับ Next.js?

เมื่อเราพูดถึงการพัฒนาแอปพลิเคชันด้วย Next.js เราจะได้ประโยชน์จากความสามารถในการสร้างแอปที่เร็วขึ้นและสามารถรองรับทั้งการเรนเดอร์ฝั่งเซิร์ฟเวอร์ (Server-Side Rendering หรือ SSR) และการเรนเดอร์ฝั่งไคลเอนต์ (Client-Side Rendering หรือ CSR) ซึ่งทั้งสองเทคนิคนี้ช่วยให้เว็บแอปของเราโหลดเร็วและให้ประสบการณ์การใช้งานที่ดีมากขึ้น

การนำ Firebase Firestore มาใช้ร่วมกับ Next.js ช่วยให้เราสามารถพัฒนาแอปที่สามารถจัดเก็บและดึงข้อมูลจากฐานข้อมูลบน Cloud ได้อย่างสะดวก นอกจากนี้ยังช่วยให้สามารถใช้คุณสมบัติที่ดีของ Firestore เช่น การดึงข้อมูลแบบเรียลไทม์ ซึ่งเหมาะกับการสร้างแอปพลิเคชันที่ต้องการการอัปเดตข้อมูลทันที เช่น การแสดงผลของข้อมูลที่เปลี่ยนแปลงตลอดเวลา

ขั้นตอนการติดตั้งและใช้งาน Firebase Firestore กับ Next.js

1. การติดตั้ง Firebase ในโปรเจกต์ Next.js

เริ่มต้นจากการติดตั้ง Firebase SDK โดยใช้คำสั่ง npm หรือ yarn

npm install firebase

หรือ

yarn add firebase

จากนั้นให้สร้างไฟล์สำหรับการตั้งค่าการเชื่อมต่อกับ Firebase โดยปกติแล้วเราจะสร้างไฟล์ firebase.js ในโฟลเดอร์ lib หรือ utils เช่น:

// lib/firebase.js
import firebase from 'firebase/app';
import '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'
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app(); // ถ้ามีการเชื่อมต่อ Firebase อยู่แล้วให้ใช้การเชื่อมต่อนั้น
}

const firestore = firebase.firestore();

export { firestore };

ในไฟล์นี้คุณจะต้องใส่ค่าคอนฟิก Firebase ที่ได้จาก Firebase Console ซึ่งประกอบด้วย apiKey, authDomain, projectId, และอื่นๆ

2. การเชื่อมต่อกับ Firestore และการดึงข้อมูล

เมื่อเชื่อมต่อกับ Firebase แล้ว เราสามารถดึงข้อมูลจาก Firestore มาใช้งานได้โดยการใช้คำสั่ง Firestore API

ตัวอย่างการดึงข้อมูลจาก Firestore ใน Next.js:

// pages/index.js
import { useEffect, useState } from 'react';
import { firestore } from '../lib/firebase';

const Home = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const snapshot = await firestore.collection('users').get();
      const usersList = snapshot.docs.map(doc => doc.data());
      setData(usersList);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {data.map((user, index) => (
          <li key={index}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Home;

ในตัวอย่างนี้ เราดึงข้อมูลจาก Firestore ที่คอลเล็กชัน users และแสดงผลข้อมูลในเว็บเพจ

3. การอัปเดตข้อมูลใน Firestore

การอัปเดตข้อมูลใน Firestore สามารถทำได้ง่ายมากๆ เช่น การเพิ่มข้อมูลใหม่ หรือการอัปเดตข้อมูลที่มีอยู่แล้ว:

// การเพิ่มข้อมูล
const addUser = async () => {
  await firestore.collection('users').add({
    name: 'John Doe',
    email: 'john.doe@example.com'
  });
};

// การอัปเดตข้อมูล
const updateUser = async (userId) => {
  await firestore.collection('users').doc(userId).update({
    name: 'Jane Doe'
  });
};

4. การใช้งาน Firestore แบบ Real-Time

หนึ่งในฟีเจอร์ที่ยอดเยี่ยมของ Firestore คือการดึงข้อมูลแบบเรียลไทม์ โดยใช้คำสั่ง onSnapshot ซึ่งจะทำให้ข้อมูลในแอปของคุณอัปเดตอัตโนมัติเมื่อมีการเปลี่ยนแปลงใน Firestore

useEffect(() => {
  const unsubscribe = firestore.collection('users').onSnapshot(snapshot => {
    const usersList = snapshot.docs.map(doc => doc.data());
    setData(usersList);
  });

  // ทำความสะอาดการเชื่อมต่อเมื่อคอมโพเนนต์ถูก unmount
  return () => unsubscribe();
}, []);

5. การจัดการกับข้อมูลออฟไลน์

Firestore มีฟีเจอร์ที่สามารถทำงานออฟไลน์ได้ ซึ่งหมายความว่าผู้ใช้สามารถใช้งานแอปได้แม้จะไม่มีการเชื่อมต่ออินเทอร์เน็ต เมื่อมีการเชื่อมต่อใหม่ ข้อมูลจะถูกซิงค์อัตโนมัติ

สรุป

การใช้ Firebase Firestore กับ Next.js เป็นการผสมผสานที่ยอดเยี่ยมสำหรับการพัฒนาแอปที่มีความสามารถในการจัดการข้อมูลแบบเรียลไทม์ และรองรับการพัฒนาแอปที่มีประสิทธิภาพ ทั้งในแง่ของการจัดการข้อมูลและการแสดงผลบนหน้าเว็บ โดยที่ Firebase Firestore จะช่วยให้การพัฒนาแอปเป็นเรื่องง่ายขึ้น และ Next.js ก็สามารถเพิ่มความเร็วให้กับแอปได้

การทำงานร่วมกันระหว่าง Firebase และ Next.js จะช่วยให้คุณสามารถสร้างแอปพลิเคชันที่ทันสมัยและรองรับการทำงานที่หลากหลายได้อย่างมีประสิทธิภาพ