Widget รับ Feedback แบบ Seamless สำหรับ Next.js ด้วย Upstash Redis

Feedback จากผู้ใช้สำคัญต่อการตัดสินใจผลิตภัณฑ์ เราสร้าง Feedback Widget ที่เป็น React Component พร้อม Backend API บน Next.js เก็บข้อมูลลง Upstash Redis และจัดการดูผ่าน Upstash Console

1. การติดตั้ง

npm install @upstash/feedback @upstash/redis

เพิ่ม Component ใน pages/_app.js

// pages/_app.js
import "@upstash/feedback/dist/style.css";
import FeedbackWidget from "@upstash/feedback";

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <FeedbackWidget type="full" />
      <Component {...pageProps} />
    </>
  );
}

สร้าง API Endpoint pages/api/feedback.js

// pages/api/feedback.js
import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL,
  token: process.env.UPSTASH_REDIS_REST_TOKEN,
});

export default async function FeedbackWidgetAPI(req, res) {
  try {
    await redis.hset("feedback", {
      [Date.now().toString()]: req.body,
    });
    return res.status(200).json({ message: "success" });
  } catch (err) {
    return res.status(400).json({ message: err });
  }
}

สร้างฐานข้อมูล Upstash Redis แล้วใส่ Credentials ใน .env.local:

UPSTASH_REDIS_REST_URL=https://your-db.upstash.io
UPSTASH_REDIS_REST_TOKEN=your-token

2. Admin Dashboard

Upstash Console มีหน้า Integrations → Feedback Widget ให้ดูและจัดการ Feedback ที่ส่งมา

3. Configuration Options

ตัวอย่างการใช้งาน

// แสดงแบบเต็ม + ใส่ User email อัตโนมัติ
<FeedbackWidget type="full" user={currentUser.email} />

// อนุญาต Anonymous (ใส่ string ใดๆ เพื่อซ่อน Email input)
<FeedbackWidget type="full" user="anonymous" />

// แสดง Dialog ทันทีเมื่อโหลดหน้า
<FeedbackWidget type="full" showOnInitial={true} />

// Custom Styling
<FeedbackWidget
  type="full"
  themeColor="#3b82f6"
  textColor="#ffffff"
  title="We'd love your feedback!"
  description="Help us improve by sharing your thoughts."
/>

4. สรุป

Widget นี้ช่วยให้เพิ่มระบบรับ Feedback ได้ในไม่กี่นาที โดยไม่ต้องสร้าง Backend เอง ข้อมูลเก็บใน Upstash Redis (Serverless, Pay-per-request) และดูได้จาก Console ทันที

GitHub Repo: upstash/feedback-widget
Demo: Live Demo

รองรับ Next.js อยู่แล้ว - ยินดีรับ Contribution สำหรับ Nuxt, SvelteKit, Remix ครับ!