Add a newsletter signup to your Next.js app
A single client component collects double-opt-in subscribers and lead metadata in any Next.js app (App Router or Pages) — and you read the list back from your server with a secret key.
1 · Drop in the component
Create a free account, copy your publishable key from the portal, and paste it where you see pk_live_YOUR_KEY below. The key is safe in client-side code.
'use client';
import { useState } from 'react';
export default function Newsletter() {
const [msg, setMsg] = useState('');
async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
const email = (e.currentTarget.elements.namedItem('email') as HTMLInputElement).value;
try {
const res = await fetch('https://api.ec.emcognito.com/subscribe', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Publishable-Key': 'pk_live_YOUR_KEY',
},
body: JSON.stringify({
email,
// Optional: provider, spend_band, region, workload, notes
}),
});
if (!res.ok) throw new Error();
setMsg('Check your inbox to confirm your subscription.');
} catch {
setMsg('Something went wrong — please try again.');
}
}
return (
<form onSubmit={onSubmit}>
<input type="email" name="email" placeholder="you@example.com" required />
<button type="submit">Subscribe</button>
<p role="status" aria-live="polite">{msg}</p>
</form>
);
}2 · Subscribers confirm by email
emcognito sends a confirmation email automatically — double opt-in is on by default. The address is recorded as pending and only joins your verified list after the person clicks the link. Bounces and complaints are suppressed for you.
3 · Use your list anywhere
Verified subscribers appear in your owner portal (search, filter, CSV export). Read them server-side with a secret key over GET /v1/subscribers, or get a signed webhook the moment someone confirms — so new subscribers flow straight into your stack. You own the list; emcognito is the collection layer, not an ESP.
FAQ
App Router or Pages Router?
Either. This is a client component (it uses the "use client" directive); drop it into an App Router page or import it into a Pages Router page — both work the same way.
Can I read my subscribers from a Server Component or Route Handler?
Yes. Create a server-side secret key (sk_live_…) in the portal and call GET /v1/subscribers from your server — never expose the secret key to the browser.