Next.jsアプリケーションのフィードバックウィジェット

依存関係をインストールする：

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 これは、UpstashConsoleのデータベース詳細ページにあります。

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

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