Next.js

Set up

1. Install the package

   npm install @fewchurs/next

2. Add your API key

   Put the key in your environment file. Don't start the name with NEXT_PUBLIC_, or it will be sent to the browser.

   .env.local

   FEWCHURS_API_KEY=fr_live_xxx

3. Add the route handler

   Create this one file. When a visitor votes or comments, the board calls this route. The route adds your key and passes the call to Fewchurs.

   app/api/fewchurs/[...route]/route.ts

   export { GET, POST, DELETE } from "@fewchurs/next/handler";

4. Show the board on a page

   app/feedback/page.tsx

   import { FewchursBoard } from "@fewchurs/next";
   import "@fewchurs/next/styles.css";
   
   export default function FeedbackPage() {
     return <FewchursBoard />;
   }

   The board loads on the server, so the page arrives with the requests already in it. Search engines can read them too.

Signed-in users

By default each visitor gets a random ID, saved in a cookie. If your app has accounts, use a hash of the user's ID instead. Then votes follow the person to every device.

import { createHandler } from "@fewchurs/next/handler";
import { createHash } from "node:crypto";

export const { GET, POST, DELETE } = createHandler({
  deviceId: async () => {
    const session = await auth(); // your own auth
    return session
      ? createHash("sha256").update(session.userId).digest("hex")
      : crypto.randomUUID();
  },
});

Change the look

Pick which tabs to show, whether people can comment, and your colors and text. You can also use CSS variables like --fw-primary, --fw-radius and --fw-font.

<FewchursBoard
  tabs={["top", "new"]}
  defaultTab="top"
  allowComments
  emailField="optional"
  theme={{ primary: "#0f766e", radius: 8 }}
  labels={{ title: "Ideas", submit: "Suggest an idea" }}
/>

initialFeatureId shows one request above the list, with its comments open and rendered on the server — handy for a link from an email straight to a request. See Link to one request.

Need functions as props, like renderFeature? Those can't be passed to a server component. Use the board from @fewchurs/react in a "use client" file instead.

Build your own UI

Use the React hooks in a client component. Point the provider at your route handler and the key still stays on the server.

"use client";

import { FewchursProvider, useFeatures } from "@fewchurs/react";

function Ideas() {
  const { features, loadMore, hasMore } = useFeatures({ sort: "top" });
  // your own markup
}

export function Feedback() {
  // Talks to your route handler, so the key stays on the server
  return (
    <FewchursProvider baseUrl="/api/fewchurs">
      <Ideas />
    </FewchursProvider>
  );
}

Every hook is listed in the React guide.

The "Powered by" badge

The free plan shows a small "Powered by Fewchurs" line. It goes away on its own when you upgrade to Starter or Pro.