Next.js-এর জন্য সিমলেস ইউজার ফিডব্যাক উইজেট

প্রোডাক্ট ডিসিশন গাইড করার জন্য ইউজার ফিডব্যাক গুরুত্বপূর্ণ। আমরা একটি উইজেট তৈরি করেছি যা আপনাকে আপনার ব্যবহারকারীদের থেকে ফিডব্যাক পেতে সাহায্য করবে। এটি একটি React কম্পোনেন্ট যা এর ব্যাকএন্ড হিসেবে Next.js API কল করে। ব্যাকএন্ড API সিম্পলি ফিডব্যাক ডেটা Upstash রেডিস ডেটাবেসে পাঠায়। এছাড়া, আপনি Upstash কনসোল ইন্টিগ্রেশন পেজে সাবমিট করা ডেটা দেখতে এবং ম্যানেজ করতে পারবেন।

আপনি যখন কম্পোনেন্টটি আপনার 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-এ একটি রেডিস ডেটাবেস তৈরি করতে হবে তারপর UPSTASH_REDIS_REST_URL এবং UPSTASH_REDIS_REST_TOKEN রিপ্লেস করতে হবে যা Upstash কনসোলে ডেটাবেস ডিটেইলস পেজে পাওয়া যাবে।

অ্যাডমিন ড্যাশবোর্ড

Upstash কনসোলে Integrations > Feedback Widget এর নিচে একটি পেজ আছে যেন আপনি সাবমিট করা ফিডব্যাক দেখতে এবং ম্যানেজ করতে পারেন।

কনফিগারেশন

user: user ফিল্ড ব্যবহার করুন ইউজারের আইডি বা ইমেইল প্যারামিটার হিসেবে পাস করতে, যাতে ইউজারের ইমেইল দিতে না হয়।

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

অনোনিমাস সাবমিশন অনুমতি দিতে, ইউজার আইডি হিসেবে যেকোনো স্ট্রিং সেট করুন শুধু ইমেইল ইনপুট লুকাতে।

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

metadata: আপনি মেটাডেটা ফিল্ড ব্যবহার করে অতিরিক্ত ইনফরমেশন আট্যাচ করতে পারেন।

showOnInitial: true সেট করুন যদি আপনি ইনিশিয়ালি ইনপুট ডায়ালগ দেখাতে চান।

শেষ কথা

আপনার আগ্রহের উপর নির্ভর করে, আমরা নতুন কম্পোনেন্ট তৈরি করার পরিকল্পনা করছি। আপনি আমাদের GitHub রিপোতে কন্ট্রিবিউট করতে পারেন এবং ইস্যু ও ফিচার রিকোয়েস্ট খুলতে পারেন। টুইটার এবং ডিসকোর্ডে আমাদের ফলো করুন।