Add E-Signatures to Next.js

Quick start

1. Get an API key from signb.ee (free, no credit card)
2. Set SIGNBEE_API_KEY in your environment
3. Add the code below to your app

Next.js example

// app/actions/send-contract.ts
"use server";

export async function sendContract(formData: FormData) {
  const res = await fetch("https://signb.ee/api/send", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.SIGNBEE_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      content: formData.get("content"),
      senderName: formData.get("senderName"),
      senderEmail: formData.get("senderEmail"),
      recipientName: formData.get("recipientName"),
      recipientEmail: formData.get("recipientEmail"),
    }),
  });
  return res.json();
}

What happens

1. Your app sends markdown or a PDF URL to Signbee
2. Signbee generates a PDF (if markdown) and emails the recipient a signing link
3. Recipient signs — both parties receive the signed PDF with SHA-256 certificate

Also works with AI agents

Install the MCP server to let Claude, Cursor, or Windsurf send documents directly:

npx -y signbee-mcp

Integration details

Next.js is the most popular React framework for production applications. Its server actions (App Router) and API routes (Pages Router) both support e-signature integration natively, with no client-side API key exposure.

Server Actions vs API Routes: Server actions (shown above) are the recommended approach for Next.js 14+. They run server-side, keep your API key secure, and can be called directly from React Server Components or client components via form actions. For Next.js 12-13 apps, use API routes in pages/api/ instead.

Environment variables: Store SIGNBEE_API_KEY in .env.local for development and in your deployment platform's environment settings for production. Next.js automatically loads .env.local variables server-side. Never prefix with NEXT_PUBLIC_ — the API key must stay server-side.

Error handling: The example above is minimal. In production, wrap the fetch call in try/catch, validate the response status, and return structured errors to the client. Check for 401 (invalid API key), 400 (missing fields), and 429 (rate limited) responses.

Vercel deployment: Signbee works seamlessly on Vercel. Server actions and API routes run as serverless functions. Set SIGNBEE_API_KEY in your Vercel project settings under Environment Variables. The cold start overhead is negligible since the API call is a simple HTTP POST.

FAQs