Next.js

App Router or Pages — client component + API route.

Keys required. Create a site in the dashboard and copy your site key (HTML) and secret key (server). Replace sq_live_your_key in the snippets below.

How this integration works

Same three steps as every other platform — only the paste location and server hook change.

Step	What you do for Next.js
1	Use the <squeaker-widget> web component in a "use client" form component.
2	Load squeaker.js client-side, then verify in app/api/.../route.ts.

Recommended settings

Setting	Value
Widget mode	Auto (recommended) — Runs on form submit — best for most forms
Form ID	`#contact-form`
Server verify	Node.js

Copy-paste snippet

Paste into your Next.js form or template. Load squeaker.js once per page.

'use client';

import { useEffect } from 'react';

export function ContactForm() {
  useEffect(() => {
    const src = 'https://cdn.squeaker.cc/squeaker.js';
    if (document.querySelector(`script[src="${src}"]`)) return;
    const s = document.createElement('script');
    s.src = src;
    s.defer = true;
    document.head.appendChild(s);
  }, []);

  return (
    <form id="contact-form" action="/api/contact" method="POST">
      <input name="email" type="email" required />
      <squeaker-widget
        data-sitekey="sq_live_your_key"
        data-mode="auto"
        data-theme="light"
        data-api="https://api.squeaker.cc/v1"
        data-form="#contact-form"
      />
      <button type="submit">Send</button>
    </form>
  );
}

// app/api/contact/route.ts — read squeaker-token, POST to /v1/verify

Server verification

Read squeaker-token from the request and POST to /v1/verify with your secret key. Full reference: Server verify docs.

// In your form handler — no npm package required
const apiUrl = process.env.SQUEAKER_API_URL ?? 'https://api.squeaker.cc/v1';
const token = req.body['squeaker-token'];
if (!token) return res.status(400).json({ error: 'Missing token' });

const verifyRes = await fetch(`${apiUrl}/verify`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    secret: process.env.SQUEAKER_SECRET,
    token,
    remoteip: req.ip,
  }),
});
const result = await verifyRes.json();
if (!result.success) {
  return res.status(403).json({ error: result.error ?? 'Invalid token' });
}

// Token valid — process the form

Open setup generator with Next.js pre-selected · Browse all platforms