Next.js অ্যাপ্লিকেশনের জন্য প্রতিক্রিয়া উইজেট

পণ্যের সিদ্ধান্তের জন্য ব্যবহারকারীর প্রতিক্রিয়া গুরুত্বপূর্ণ। আপনার ব্যবহারকারীদের কাছ থেকে প্রতিক্রিয়া পেতে আপনাকে সাহায্য করার জন্য আমরা একটি উইজেট তৈরি করেছি৷ এটি একটি প্রতিক্রিয়া উপাদান যা নেক্সট.জেএস এপিআইকে এর ব্যাকএন্ড হিসাবে কল করে। ব্যাকএন্ড API সহজভাবে Upstash Redis ডাটাবেসে প্রতিক্রিয়া ডেটা পাঠায়। এছাড়াও, আপনি Upstash Console ইন্টিগ্রেশন পৃষ্ঠাতে জমা দেওয়া ডেটা দেখতে এবং পরিচালনা করতে সক্ষম হবেন

যখন আপনি আপনার Next.js পৃষ্ঠায় উপাদান যুক্ত করবেন, নীচের ডানদিকে একটি আইকন প্রদর্শিত হবে। ক্লিক করা হলে, প্রতিক্রিয়া ফর্ম দৃশ্যমান হবে. এটি কিভাবে কাজ করে তা দেখতে ডেমো দেখুন৷

কোডটি পরীক্ষা করতে গিথুব রেপো দেখুন। বর্তমানে, উইজেটটি একটি 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 ব্যবহার করুন একটি প্যারামিটার হিসাবে ব্যবহারকারীর আইডি বা ইমেল পাস করার জন্য ক্ষেত্র, তাই ব্যবহারকারীকে তাদের ইমেল লিখতে হবে না।

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

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

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

মেটাডেটা :আপনি মেটাডেটা ক্ষেত্র ব্যবহার করে অতিরিক্ত তথ্য সংযুক্ত করতে পারেন।

showOnInitial :সত্য সেট করুন, যদি আপনি ইনপুট ডায়ালগটি প্রারম্ভে দেখানোর জন্য পছন্দ করেন।

ক্লোজিং শব্দ

আপনার আগ্রহের উপর নির্ভর করে, আমরা নতুন উপাদান তৈরি করার পরিকল্পনা করছি। আপনি আমাদের Github রেপোতে অবদান রাখতে পারেন এবং সমস্যা এবং বৈশিষ্ট্যের অনুরোধগুলি খুলতে পারেন। Twitter এবং Discord-এ আমাদের অনুসরণ করুন৷