ไขความลับ "Unexpected token '<'" บั๊กยอดฮิตที่นักพัฒนา Next.js ต้องเจอ

เจาะลึกเบื้องหลังบั๊กหน้าจอสีแดงชวนปวดหัว พร้อมแนวทางการตรวจสอบแก้ไขระบบจัดการเซสชันและฐานข้อมูลอย่างไรให้ปิดงานได้เสร็จสรรพสไตล์ Full-Stack Developer

นักพัฒนาสาย Full-Stack Developer ที่ใช้งาน React หรือ Next.js ร่วมกับระบบ Authentication และ Database มักจะต้องเคยผ่านประสบการณ์ลืมตาตื่นมาเจอหน้าจอ Error สีแดงพร้อมข้อความชวนปวดหัวอย่าง:

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

อาการนี้ทำให้หลายคนหลงทางไปนั่งแก้โค้ดหน้าบ้าน (Client-side) อยู่เป็นวัน ๆ แต่แท้จริงแล้ว เบื้องหลังของบั๊กนี้คืออะไร และมีวิธีรับมืออย่างไร? บทความนี้จะพาไปเจาะลึกกันครับ

1. ทำไมต้องเป็นตัวอักษร '<' ?

เมื่อแอปพลิเคชันฝั่งหน้าบ้านพยายามยิง Request (เช่นการเช็กสิทธิ์ useSession() ของ NextAuth หรือการดึงข้อมูลจาก API Route) ตัวไคลเอนต์จะคาดหวังข้อมูลตอบกลับมาในรูปแบบ JSON Object เสมอ

แต่เมื่อเกิดข้อผิดพลาดรุนแรงในฝั่งเซิร์ฟเวอร์ (เช่น เอนด์พอยต์พัง, เชื่อมต่อฐานข้อมูลไม่ได้ หรือหา Route ไม่เจอ) ตัวเซิร์ฟเวอร์หรือโครงสร้างของ Next.js จะส่งหน้าเว็บ HTML Error Page (500 หรือ 404) กลับมาแทน ซึ่งหน้าเว็บ HTML ทุกหน้าจะเริ่มต้นด้วยแท็ก <!DOCTYPE html> เมื่อระบบหน้าบ้านพยายาม Parse จึงพ่นข้อผิดพลาดออกมาทันที

2. ตัวการหลัก: เมื่อ Prisma Client ยังไม่ได้ถูก Initialize

หนึ่งในสาเหตุยอดฮิตสำหรับโปรเจกต์ที่ใช้ Prisma ORM ร่วมกับระบบล็อกอิน คือฝั่ง Backend พยายามเรียกใช้งานฐานข้อมูลผ่าน new PrismaClient() ในขณะที่ตัว Client ยังไม่ได้ถูกเจเนอเรตขึ้นมาในระบบ ส่งผลให้ Server พังทันที

💡 วิธีแก้ไข:

เพียงแค่รันคำสั่งเจเนอเรตใน Terminal เพื่อสร้างและอัปเดตไคลเอนต์ให้ตรงกับ Schema ล่าสุด:

npx prisma generate

3. ข้อควรระวังเมื่อย้ายบ้านไปรันบน Vercel (Production)

เมื่อเรานำโปรเจกต์จาก Localhost ขึ้นไปรันบนระบบ Cloud แบบ Serverless Environments ของ Vercel มีจุดสำคัญ 2 จุดที่ต้องจัดการเพื่อไม่ให้บั๊กนี้ตามไปหลอกหลอน:

Build Command: ต้องมั่นใจว่ามีการปรับใน package.json ให้สั่งรันไคลเอนต์เสมอก่อนการ Build เช่น "build": "prisma generate && next build"
Environment Variables: ตรวจสอบการตั้งค่า DATABASE_URL, NEXTAUTH_URL และ NEXTAUTH_SECRET ในหน้า Vercel Dashboard ให้ครบถ้วน

สรุป: ข้อผิดพลาดนี้ไม่ใช่บั๊กของหน้าบ้าน แต่เป็นเสียงร้องเตือนจากระบบหลังบ้านว่ามีบางอย่างล่ม การไล่เช็กจาก Runtime Logs ฝั่งเซิร์ฟเวอร์จึงเป็นกุญแจสำคัญที่ช่วยให้เราปิดงานได้อย่างราบรื่นครับ

Blog Details