Framework guide

Add Feedback to Next.js

Use Bootstrapware Feedback when your Next.js SaaS needs an in-product feature-request board: list, submit, vote, and status badges. The widget is a Client Component. Pass the signed-in user from your session. There are no public board URLs.

This guide covers App Router. The same package works in Pages Router if you keep the component on the client and avoid putting secret keys in public env vars.

Install

pnpm add @bootstrapware/feedback

Import package CSS once for the tree that renders the board. Forgetting the stylesheet is the most common "it looks broken" bug.

Local adapter in a Client Component

Start local for placement and IA. No paid entitlement required. Put the widget in a file with "use client".

"use client";

import { Feedback, createLocalAdapter } from "@bootstrapware/feedback";
import "@bootstrapware/feedback/styles.css";

export function FeedbackPanel({
  user,
}: {
  user: { id: string; name?: string } | null;
}) {
  if (!user) return <p>Sign in to leave feedback.</p>;
  return (
    <Feedback
      user={user}
      adapter={createLocalAdapter({ storageKey: "app-feedback" })}
    />
  );
}

Render <FeedbackPanel /> from any Server or Client page. Only the feedback island needs to be a Client Component. Adapter resolution: explicit adapter → Hosted when boardId + publishable key → otherwise local.

Hosted embed

For Hosted storage, omit adapter and pass board id plus a publishable key. Use NEXT_PUBLIC_ only for publishable values.

<Feedback
  boardId={process.env.NEXT_PUBLIC_FEEDBACK_BOARD_ID!}
  publishableKey={process.env.NEXT_PUBLIC_BSW_PUBLISHABLE_KEY!}
  user={user}
/>

Never put bsw_live_sec_ or bsw_test_sec_ in NEXT_PUBLIC_. Secret keys stay in Route Handlers or server-only modules. See API keys and environments.

BYO Route Handlers

Implement /api/feedback endpoints that enforce your session, then pass adapter methods that fetch those routes. Re-bind authorship from the session, do not trust client-supplied author.id alone. Contract: adapter. Postgres sketch: store posts in Postgres.

Limits worth knowing

  • Title max 200, body max 5000 (plain text)
  • Statuses: open | planned | in_progress | shipped | declined
  • Hosted: ~30 creates/min and ~120 list/vote actions/min per board

Pitfalls specific to Next.js

  • Rendering Feedback in a Server Component without "use client"
  • Forgetting @bootstrapware/feedback/styles.css
  • Putting a secret key in public env
  • Assuming a public board URL exists after publish
  • Trusting client author on BYO routes without session checks

Related: Quickstart · React guide · Cursor guide · Identity · Live demo