Next.js 애플리케이션을 위한 피드백 위젯

사용자 피드백은 제품 결정을 안내하는 데 중요합니다. 사용자로부터 피드백을 받는 데 도움이 되는 위젯을 만들었습니다. Next.js API를 백엔드로 호출하는 React 컴포넌트입니다. 백엔드 API는 단순히 피드백 데이터를 Upstash Redis 데이터베이스로 보냅니다. 또한 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에서 Redis 데이터베이스를 생성한 다음 UPSTASH_REDIS_REST_URL을 교체해야 합니다. 및 UPSTASH_REDIS_REST_TOKEN Upstash 콘솔의 데이터베이스 세부 정보 페이지에서 찾을 수 있습니다.

관리자 대시보드

Upstash 콘솔에는 Integrations 아래에 페이지가 있습니다.> Feedback Widget 제출된 피드백을 보고 관리할 수 있습니다.

구성

사용자 :user 사용 필드에 사용자 ID 또는 이메일을 매개변수로 전달하므로 사용자가 이메일을 입력할 필요가 없습니다.

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

익명 제출을 허용하려면 이메일 입력을 숨기기 위해 임의의 문자열을 사용자 ID로 설정하십시오.

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

메타데이터 :메타데이터 필드를 사용하여 추가 정보를 첨부할 수 있습니다.

showOnInitial :초기에 입력 대화 상자를 표시하려면 true로 설정하십시오.

마무리 단어

관심에 따라 새로운 구성 요소를 구축할 계획입니다. Github 리포지토리와 미결 문제 및 기능 요청에 기여할 수 있습니다. Twitter와 Discord에서 팔로우하세요.