วิธีเขียนแอป Next.js ให้สรุปข้อความด้วย AI โดยไม่ต้องกลัวเว็บค้าง

ทำไมต้องแยกงาน AI ไปทำในพื้นหลัง

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

วิธีแก้คือการใช้ Trigger.dev เพื่อย้ายงานหนัก ๆ เหล่านี้ไปทำใน Background Runtime (พื้นที่ทำงานแยกต่างหากที่ทำหน้าที่ประมวลผลงานเบื้องหลัง) แทนที่จะให้ผู้ใช้ต้องรอหน้าจอค้างไว้ เราแค่ส่งคำสั่งไปเข้าคิวไว้ แล้วค่อยดึงผลลัพธ์กลับมาโชว์เมื่อทำเสร็จ วิธีนี้ช่วยให้แอปทำงานได้เสถียรขึ้นมาก

Trigger.dev คืออะไรและช่วยเราได้อย่างไร

Trigger.dev เป็นเครื่องมือแบบ Open Source ที่ช่วยจัดการ Asynchronous Workflow (การทำงานที่ไม่ต้องรอให้เสร็จทันที สามารถไปทำอย่างอื่นระหว่างรอได้) โดยที่คุณไม่ต้องไปตั้งค่า Server หรือระบบจัดการคิวให้ยุ่งยาก

ข้อดีของมันคือ:

• จัดการงานที่ใช้เวลานานได้โดยไม่รบกวนการทำงานหลักของแอป
• ตั้งค่าการลองใหม่ให้อัตโนมัติ (Automatic Retries) หากงานเกิดข้อผิดพลาด
• มีระบบคิวและตารางเวลา ทำให้จัดการลำดับงานได้แม่นยำ
• ดูสถานะการทำงานได้แบบเรียลไทม์ผ่าน Dashboard

ขั้นตอนการสร้างระบบสรุปข้อความ

ในการสร้างแอปนี้ เราต้องเตรียมโปรเจกต์ Next.js แล้วติดตั้ง Trigger.dev เข้าไป จากนั้นแบ่งงานออกเป็น 3 ส่วนหลัก คือ

1. Task (งาน): ส่วนที่เขียนคำสั่งให้ AI อย่าง Gemini ช่วยสรุปข้อความ โดยเราจะตั้งค่าให้มันลองใหม่ได้สูงสุด 5 ครั้งหากเชื่อมต่อพลาด
2. Trigger (ตัวกระตุ้น): ใช้ Server Action ของ Next.js เพื่อส่งข้อมูลข้อความไปให้ Trigger.dev เริ่มทำงาน
3. Subscription (การติดตาม): ใช้ React Hooks เพื่อดึงสถานะการทำงานจากฝั่ง Server มาแสดงผลให้ผู้ใช้เห็นทันทีว่า AI กำลังสรุปถึงไหนแล้ว

ด้วยวิธีนี้ งานสรุปข้อความจะถูกส่งไปรันในสภาพแวดล้อมของ Trigger.dev ทำให้ตัวแอป Next.js หลักยังคงตอบสนองต่อผู้ใช้งานได้อย่างรวดเร็ว ไม่ต้องรอให้ AI ทำงานให้เสร็จก่อน

สรุปสั้น ๆ

บทความนี้สอนวิธีเชื่อมต่อ Next.js กับ Gemini AI ผ่าน Trigger.dev เพื่อแก้ปัญหาเว็บค้างจากการรัน AI นาน ๆ วิธีนี้จะช่วยให้นักพัฒนาสามารถจัดการงานหนักในพื้นหลังได้อย่างมืออาชีพ และสร้างประสบการณ์การใช้งานที่ลื่นไหลให้แก่ผู้ใช้ได้ดียิ่งขึ้น