🚀 ตั้งค่าโปรเจกต์ Next.js 15 (App Router) ให้เชื่อม Firebase SDK v10 (ข้ามแพลตฟอร์ม)

บทความนี้จะสอนตั้งค่าโปรเจกต์ Next.js 15 (App Router) โดยใช้ JavaScript (ไม่ใช้ TypeScript) และเชื่อมต่อกับ Firebase SDK v10 ให้สามารถทำงานได้ทั้งบน macOS และ Windows พร้อมอธิบายการติดตั้งแพ็กเกจ, การจัดโครงสร้างโปรเจกต์, การสร้าง .env.local และแนวทางแยก config สำหรับ dev/prod

---

1. เริ่มต้นโปรเจกต์ Next.js 15 แบบ App Router

npx create-next-app@latest next-firebase-demo --js --app
cd next-firebase-demo

---

2. ติดตั้งแพ็กเกจที่จำเป็น

npm install firebase firebase-admin dotenv

แพ็กเกจ	ใช้ทำอะไร
firebase	SDK สำหรับใช้งานฝั่ง Client (Browser)
firebase-admin	SDK สำหรับใช้งานฝั่ง Server (เช่น API Route)
dotenv	ใช้โหลดค่าตัวแปรสภาพแวดล้อมจากไฟล์ .env.local

---

3. โครงสร้างไฟล์ที่แนะนำ

next-firebase-demo
├── app/
│   └── page.js (หรืออื่น ๆ ตาม App Router)
├── lib/
│   ├── firebaseClient.js
│   └── firebaseAdmin.js
├── .env.local
└── next.config.js

---

4. สร้างไฟล์ .env.local

# Client-side
NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id

# Server-side
FIREBASE_ADMIN_PROJECT_ID=your-project-id
FIREBASE_ADMIN_CLIENT_EMAIL=your-service-account-email
FIREBASE_ADMIN_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n"

หมายเหตุ: ค่า NEXT_PUBLIC_ จะถูกเปิดเผยในฝั่ง Client

---

5. เขียน lib/firebaseClient.js

// lib/firebaseClient.js
import { initializeApp, getApps, getApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

export const auth = getAuth(app);
export const db = getFirestore(app);

---

6. เขียน lib/firebaseAdmin.js

// lib/firebaseAdmin.js
import { initializeApp, cert, getApps, getApp } from 'firebase-admin/app';
import { getAuth } from 'firebase-admin/auth';
import { getFirestore } from 'firebase-admin/firestore';
import dotenv from 'dotenv';

dotenv.config();

const adminConfig = {
  credential: cert({
    projectId: process.env.FIREBASE_ADMIN_PROJECT_ID,
    clientEmail: process.env.FIREBASE_ADMIN_CLIENT_EMAIL,
    privateKey: process.env.FIREBASE_ADMIN_PRIVATE_KEY.replace(/\\n/g, '\n'),
  })
};

const adminApp = !getApps().length ? initializeApp(adminConfig) : getApp();

export const adminAuth = getAuth(adminApp);
export const adminDB = getFirestore(adminApp);

---

7. แนวทางแยก config สำหรับ dev / prod

วิธี	คำอธิบาย
.env.local / .env.production	แยกไฟล์ไว้คนละสภาพแวดล้อม แล้วใช้ dotenv โหลด
Platform Dashboard	ถ้า deploy บน Vercel สามารถใส่ ENV แยกในแต่ละ environment ได้
next.config.js	ใช้กำหนด env ที่ไม่ลับในไฟล์ config โดยตรง

ตัวอย่างเพิ่มใน next.config.js:

module.exports = {
  env: {
    NEXT_PUBLIC_APP_VERSION: '1.0.0'
  }
};

---

8. สรุป

• ใช้ App Router ของ Next.js 15
• เชื่อม Firebase SDK v10 ด้วย JS ธรรมดา
• ใช้ dotenv แยก env
• เขียน firebaseClient.js สำหรับฝั่งเบราว์เซอร์ และ firebaseAdmin.js สำหรับฝั่งเซิร์ฟเวอร์
• ปลอดภัยและพร้อมใช้งานข้ามแพลตฟอร์มทั้ง macOS และ Windows