สาเหตุที่โค้ดส่วนนี้ไม่สามารถใช้ process.env.FIREBASE_CLIENT_API_KEY ได้ มีแนวโน้มว่าเป็นเพราะ process.env ไม่สามารถใช้ได้โดยตรงในฝั่ง client ของ Next.js เว้นแต่ตัวแปรจะถูกตั้งชื่อขึ้นต้นด้วย NEXT_PUBLIC_ เช่น:

NEXT_PUBLIC_FIREBASE_CLIENT_API_KEY=xxx

✅ วิธีแก้:

ให้เปลี่ยน .env.local (หรือ .env) ที่ใช้สำหรับ Firebase client ให้ใช้ prefix NEXT_PUBLIC_ แบบนี้:

NEXT_PUBLIC_FIREBASE_CLIENT_API_KEY=AIzaSy...
NEXT_PUBLIC_FIREBASE_CLIENT_AUTH_DOMAIN=your-app.firebaseapp.com
NEXT_PUBLIC_FIREBASE_CLIENT_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_CLIENT_STORAGE_BUCKET=your-app.appspot.com
NEXT_PUBLIC_FIREBASE_CLIENT_MESSAGING_SENDER_ID=1234567890
NEXT_PUBLIC_FIREBASE_CLIENT_APP_ID=1:1234567890:web:abcdef123456

แล้วแก้ firebaseConfig ในไฟล์ firebaseClient.js แบบนี้:

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_APP_ID
};

✨ ทำความเข้าใจเพิ่มเติม:

• ตัวแปร .env ที่ไม่ได้ขึ้นต้นด้วย NEXT_PUBLIC_ จะ ถูกใช้ได้เฉพาะในฝั่ง server เท่านั้น
• หากใช้ใน component หรือไฟล์ที่ถูกโหลดฝั่ง client (เช่นไฟล์ที่อยู่ใน pages, app, lib, หรือใช้ใน React component โดยตรง) จะต้องใช้ NEXT_PUBLIC_ prefix เท่านั้น

---

ถ้าอยากให้ช่วยดูว่าใช้งานถูกต้องแล้วหรือยัง บอกชื่อไฟล์ .env ที่ใช้อยู่ หรือแนบค่าตัวแปร (ไม่ต้องใส่ค่า key จริง ๆ ก็ได้ เอาแค่ชื่อ) ก็ได้นะจ๊ะ