Next.js के लिए निर्बाध उपयोगकर्ता फीडबैक विजेट

परिचय

उत्पाद निर्णयों का मार्गदर्शन करने के लिए उपयोगकर्ता प्रतिक्रिया महत्वपूर्ण है। हमने एक विजेट बनाया है जो आपको अपने उपयोगकर्ताओं से प्रतिक्रिया प्राप्त करने में मदद करता है। यह एक React कंपोनेंट है जो अपने बैकएंड के रूप में Next.js API को कॉल करता है। बैकएंड API केवल प्रतिक्रिया डेटा को Upstash Redis डेटाबेस में भेजता है। साथ ही, आप सबमिट किए गए डेटा को Upstash Console Integrations Page में देख और प्रबंधित कर सकेंगे।

जब आप कंपोनेंट को अपने Next.js पेज में जोड़ते हैं, तो नीचे दाएं कोने में एक आइकन प्रदर्शित होगा। क्लिक करने पर, फीडबैक फॉर्म दिखाई देगा। डेमो देखें कि यह कैसे काम करता है।

Github रेपो देखें कोड चेक करने के लिए। वर्तमान में, विजेट को Next.js एप्लिकेशन में उपयोग के लिए डिज़ाइन किया गया है। हम Nuxt, SvelteKit या Remix जैसे अन्य को सपोर्ट करने के लिए आपके योगदान का स्वागत करते हैं।

इंस्टॉलेशन

निर्भरताएं इंस्टॉल करें:

npm install @upstash/feedback @upstash/redis

कंपोनेंट और स्टाइल:

// 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 कोड को pages/api/feedback.js में कॉपी/पेस्ट करें:

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

const redis = new Redis({
  url: "UPSTASH_REDIS_REST_URL",
  token: "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 डेटाबेस बनाना होगा फिर UPSTASH_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN को बदलें जो Upstash Console में डेटाबेस विवरण पेज पर मिल सकते हैं।

एडमिन डैशबोर्ड

Upstash Console में Integrations > Feedback Widget के तहत एक पेज है ताकि आप सबमिट की गई प्रतिक्रिया देख और प्रबंधित कर सकें।

कॉन्फ़िगरेशन

user: उपयोगकर्ता की आईडी या ईमेल को पैरामीटर के रूप में पास करने के लिए user फ़ील्ड का उपयोग करें, ताकि उपयोगकर्ता को अपना ईमेल दर्ज न करना पड़े।

<FeedbackWidget type="full" user={currentUser.email} />

अनाम सबमिशन की अनुमति देने के लिए, ईमेल इनपुट को छिपाने के लिए किसी भी स्ट्रिंग को यूज़र आईडी के रूप में सेट करें।

<FeedbackWidget type="full" user="anything" />

metadata: आप metadata फ़ील्ड का उपयोग करके अतिरिक्त जानकारी जोड़ सकते हैं।

showOnInitial: यदि आप प्रारंभ में इनपुट डायलॉग दिखाना पसंद करते हैं तो true सेट करें।

समापन शब्द

आपकी रुचि के आधार पर, हम नए कंपोनेंट बनाने की योजना बना रहे हैं। आप हमारे Github रेपो में योगदान दे सकते हैं और इश्यू और फीचर अनुरोध खोल सकते हैं। हमें ट्विटर और डिस्कॉर्ड पर फॉलो करें।