เคยเจอปัญหานี้ไหม? กดปุ่มแล้วไม่รู้ว่าระบบทำงานหรือยัง ส่งฟอร์มแล้วไม่แน่ใจว่าผ่านหรือไม่ หรืออยากให้เว็บมีแจ้งเตือนที่ดูดีแต่ไม่อยากเขียนเองให้ยุ่งยาก
วันนี้เราจะมาเรียนรู้วิธีใช้ Toast Notifications ใน Next.js แบบง่ายๆ โดยใช้ react-hot-toast ไลบรารีสุดเทพที่ช่วยให้แจ้งเตือนแบบลื่นไหล ดูดี และใช้งานง่าย
🔥 ทำไมต้องใช้ Toast Notifications?
Toast Notifications คือ ข้อความแจ้งเตือนแบบชั่วคราว ที่แสดงขึ้นมาในเว็บเมื่อมีเหตุการณ์บางอย่างเกิดขึ้น เช่น:
✅ แจ้งเตือนเมื่อทำรายการสำเร็จ ✅
✅ แจ้งเตือนข้อผิดพลาด (เช่น ฟอร์มไม่ถูกต้อง) ❌
✅ แจ้งเตือนระหว่างโหลดข้อมูล ⏳
Toast ดีๆ ควรเป็น Non-intrusive (ไม่รบกวน) และ Auto-dismiss (หายไปเอง) เพื่อไม่ให้ผู้ใช้รำคาญ
🚀 ติดตั้ง react-hot-toast ใน Next.js
เราจะใช้ react-hot-toast เพราะมันใช้ง่ายและทำงานได้ดีกับ Next.js
ติดตั้งแพ็กเกจ
npm install react-hot-toast
หรือถ้าใช้ Yarn
yarn add react-hot-toast
🎨 ตั้งค่า ToastProvider
ToastProvider เป็นคอมโพเนนต์ที่ช่วยให้เราสามารถใช้ toast ได้ทั่วแอป ต้องเพิ่มใน _app.js
แก้ไข pages/_app.js
import { Toaster } from 'react-hot-toast';
import '../styles/globals.css';
function MyApp({ Component, pageProps }) {
return (
<>
<Toaster position="top-right" reverseOrder={false} />
<Component {...pageProps} />
</>
);
}
export default MyApp;
🔹 position="top-right" – ให้ toast แสดงที่มุมขวาบน
🔹 reverseOrder={false} – ให้ข้อความใหม่ขึ้นด้านล่าง
🎯 ใช้งาน toast แจ้งเตือน
react-hot-toast ใช้งานง่ายมาก มีฟังก์ชันหลักๆ เช่น
- toast.success("ข้อความ") ✅ แจ้งเตือนสำเร็จ
- toast.error("ข้อความ") ❌ แจ้งเตือนข้อผิดพลาด
- toast.loading("กำลังโหลด...") ⏳ แจ้งเตือนระหว่างโหลด
- toast.dismiss() 🚫 ลบ toast ที่กำลังแสดง
💡 ตัวอย่างการใช้งาน toast ในปุ่ม
สร้างไฟล์ pages/index.js และเพิ่มปุ่มที่กดแล้วแจ้งเตือน
import toast from 'react-hot-toast';
export default function Home() {
const notifySuccess = () => toast.success('บันทึกข้อมูลสำเร็จ! 🎉');
const notifyError = () => toast.error('เกิดข้อผิดพลาด ❌');
const notifyLoading = () => {
const toastId = toast.loading('กำลังโหลดข้อมูล...');
setTimeout(() => toast.success('โหลดสำเร็จ ✅', { id: toastId }), 2000);
};
return (
<div className="p-10">
<h1 className="text-2xl font-bold mb-4">🔔 ทดลองใช้ Toast Notifications</h1>
<button onClick={notifySuccess} className="bg-green-500 text-white px-4 py-2 mr-2 rounded">✅ แจ้งเตือนสำเร็จ</button>
<button onClick={notifyError} className="bg-red-500 text-white px-4 py-2 mr-2 rounded">❌ แจ้งเตือนข้อผิดพลาด</button>
<button onClick={notifyLoading} className="bg-blue-500 text-white px-4 py-2 rounded">⏳ แจ้งเตือนระหว่างโหลด</button>
</div>
);
}
🔍 อธิบายโค้ด:
- toast.success() ใช้แจ้งเตือนเมื่อทำรายการสำเร็จ
- toast.error() ใช้แจ้งเตือนเมื่อเกิดข้อผิดพลาด
- toast.loading() ใช้แจ้งเตือนว่ากำลังโหลดข้อมูล และอัปเดตเป็น toast.success() หลังจากโหลดเสร็จ
🎨 ปรับแต่งสไตล์ Toast
เราสามารถ กำหนดสไตล์ ของ toast ได้ เช่น เปลี่ยนสีพื้นหลัง เปลี่ยนไอคอน หรือกำหนดเวลาหายไปเอง
1️⃣ กำหนดเวลาให้ toast หายไปอัตโนมัติ
toast.success('บันทึกเรียบร้อย!', {
duration: 5000, // แสดงผล 5 วินาที
});
2️⃣ เปลี่ยนสีและไอคอน
toast('🛑 คำเตือน: โปรดตรวจสอบข้อมูล', {
style: {
border: '1px solid red',
padding: '16px',
color: 'red',
},
});
3️⃣ กำหนด animation
toast.success('ทำสำเร็จ!', {
style: { animation: 'bounce 1s ease-in-out' },
});
🔄 ใช้ Toast กับ API Requests
ลองใช้ toast กับ API จริงๆ เช่น fetch()
const fetchData = async () => {
const toastId = toast.loading('กำลังโหลดข้อมูล...');
try {
const response = await fetch('/api/data');
const result = await response.json();
toast.success('โหลดข้อมูลสำเร็จ!', { id: toastId });
} catch (error) {
toast.error('โหลดข้อมูลล้มเหลว', { id: toastId });
}
};
🔍 อธิบาย:
- toast.loading() แจ้งเตือนว่ากำลังโหลด
- ถ้าโหลดสำเร็จ → toast.success()
- ถ้าเกิดข้อผิดพลาด → toast.error()
📌 ใช้ Toast กับฟอร์ม
ในฟอร์มเราสามารถใช้ toast แจ้งเตือนว่า กรอกข้อมูลถูกต้องหรือไม่
const handleSubmit = (e) => {
e.preventDefault();
if (!email) {
toast.error('กรุณากรอกอีเมล!');
return;
}
toast.success('ส่งข้อมูลสำเร็จ!');
};
🏆 สรุป
✅ react-hot-toast ใช้งานง่ายมาก
✅ ใช้กับ API Requests, ฟอร์ม และปุ่มต่างๆ ได้
✅ ปรับแต่งสไตล์และอนิเมชันได้
✅ ไม่ต้องรีโหลดหน้า ก็แจ้งเตือนได้แบบสวยๆ
พร้อมใช้ Toast แจ้งเตือนให้เว็บของคุณดูโปรขึ้นหรือยัง? 🚀
