Next.jsアプリにフィードバックウィジェットを実装する方法（Upstash Redis連携）

ユーザーフィードバックは、製品の改善や開発の方向性を決めるうえで非常に重要な情報源です。本記事では、ユーザーから手軽にフィードバックを収集できるウィジェットをご紹介します。これはNext.jsのAPIをバックエンドとして呼び出すReactコンポーネントで、バックエンド側のAPIは受け取ったフィードバックデータをUpstash Redisデータベースへ送信するだけのシンプルな構成になっています。送信されたデータは、Upstashコンソールの「Integrations」ページからいつでも確認・管理できます。

このコンポーネントを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コンソールのデータベース詳細ページに記載されているUPSTASH_REDIS_REST_URLとUPSTASH_REDIS_REST_TOKENを、上記コード内の該当箇所に置き換えてください。

管理ダッシュボード

Upstashコンソールには「Integrations」＞「Feedback Widget」という専用ページが用意されており、送信されたフィードバックの一覧確認や管理を直感的に行えます。わざわざデータベースを直接操作する必要がないため、運用負荷を大幅に軽減できます。

設定オプション

user：userフィールドを使ってユーザーのIDやメールアドレスをパラメータとして渡すと、ユーザーがメールアドレスを入力する手間が省けます。

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

匿名での送信を許可したい場合は、任意の文字列をユーザーIDとして設定するだけで、メールアドレスの入力欄を非表示にできます。

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

metadata：metadataフィールドを活用すれば、ページURLやユーザー属性など、フィードバックに追加情報を紐付けることができます。

showOnInitial：ページ読み込み時に最初から入力ダイアログを表示したい場合は、trueに設定してください。

おわりに

皆さまのご関心に応じて、今後も新しいコンポーネントの開発を計画しています。GitHubリポジトリへのコントリビューションや、issue・機能リクエストの投稿をお待ちしています。最新情報はTwitterやDiscordでも発信しているので、ぜひチェックしてみてください。