🏠 การตั้งค่า Firebase Console สำหรับ Next.js + Firestore (พร้อมภาพ)

บทความนี้จะแนะนำขั้นตอนการตั้งค่า Firebase Console เพื่อใช้ร่วมกับโปรเจกต์ Next.js (App Router) โดยใช้ JavaScript โดยเฉพาะการเปิดใช้งาน Firestore, สร้างคอลเลกชัน, เขียน Security Rules สำหรับผู้ใช้ที่ Authenticated เท่านั้น พร้อม เช็กลิสต์สิ่งที่ห้ามลืม และเน้นภาพประกอบชัดเจน

---

1. เปิดโปรเจ็ก Firebase

1. ไปที่ https://console.firebase.google.com
2. คลิก "Add project"
3. กรอกชื่อโปรเจกต์ เช่น next-firebase-app
4. ปิด Google Analytics (หากไม่ต้องการ)
5. คลิก Create project

⭐ ภาพ:

---

2. เปิด Firestore (Native mode)

1. ไปที่เมนู "Cloud Firestore"
2. คลิกปุ่ม "Create database"
3. เลือก "Start in production mode"
4. เลือก โลเกชัน (GCP region) เช่น asia-southeast1
5. กด Enable

⭐ ภาพ:

⚠ หมายเหตุ: โลเกชัน Firestore เลือกได้ครั้งเดียวเท่านั้น เปลี่ยนไม่ได้ภายหลัง!

---

3. สร้าง Collection แรก

1. คลิกปุ่ม "Start collection"
2. ตั้งชื่อคอลเลกชัน เช่น messages
3. เพิ่ม Document แรก (ใช้ ID แบบ auto-id ก็ได้)
   • Field: text = "Hello Firebase"
4. คลิก Save

⭐ ภาพ:

---

4. การตั้ง Index อัตโนมัติ

• Firebase จะสร้าง Index ให้อัตโนมัติเมื่อคุณใช้ query ที่มี .where() และ .orderBy() พร้อมกัน
• หากจำเป็นต้องสร้าง index เอง จะมีปุ่มให้กดจาก error message โดยตรง (พร้อมลิงก์ไปหน้าสร้าง index)

⭐ ตัวอย่าง error: FirebaseError: The query requires an index ➔ มีปุ่ม "Create index"

---

5. เขียน Security Rules (สำหรับ Development)

1. ไปที่แท็บ "Rules"
2. แก้ไขให้เป็นแบบนี้:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

✅ ความหมาย: ผู้ใช้งานต้อง Auth ผ่าน Firebase Auth ก่อน ถึงจะอ่านหรือเขียนได้

3. คลิก "Publish" เพื่อบันทึก

⭐ แนะนำให้เปลี่ยนเป็น Rule ที่ละเอียดขึ้นเมื่อขึ้น Production

---

✅ เช็กลิสต์เพื่อไม่ใหลลืม

✔	รายการที่ควรตรวจสอบ
[ ]	เปิด Firebase project
[ ]	เปิด Firestore (Native mode)
[ ]	กำหนดโลเกชัน Firestore
[ ]	เพิ่มบิลลิ่ง (ถ้าจะใช้ Cloud Function หรือ Phone Auth)
[ ]	ตั้ง Security Rules (dev)
[ ]	ตั้ง IAM จำกัดสิทธิ์การ access Console (Dev/PM/Admin)

---

📅 พร้อมใช้งานแล้ว!

หลังจากตั้งค่าทุกอย่างเรียบร้อย คุณสามารถเชื่อม Firestore กับแอป Next.js ได้ทันที เช่น ดึงข้อมูล messages มาแสดง หรือเพิ่มเอกสารใหม่ผ่าน form ได้ทันทีผ่าน Firebase SDK v10

หากต้องการตัวอย่างโค้ดการเชื่อมฝั่ง client/server ใน Next.js กดดูบทความ "Firebase SDK v10 + Next.js" ที่เกี่ยวข้องได้เลย!