[Bird](/)

/

[Email](/email)

EMAIL API / STACK EVALUATION

# Email API for Next.js.

Choose a Server Action for a trusted form or a route handler for an HTTP endpoint. Keep the Bird key in server environment variables; the browser calls your server, never Bird with that key.

[Start now ↗](/dashboard/signup?returnTo=%2Fdashboard%2Fw%2Femail)

[Read the Next.js quickstart](/docs/get-started/quickstarts/typescript/next-js/email)

[Explore Email API](/email-api)

N

BIRD / EMAIL

From your code. To a traceable send.

Your application

A customer connection ↗

A little context. A clear next step.

## See the first send.

**Node.js**: `npm install @messagebird/sdk@0.67.0`

File: `app/actions/send-welcome.ts`

Run: `Use in an existing App Router application`

```typescript
"use server";

import { BirdClient } from "@messagebird/sdk";

const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });

export async function sendWelcome() {
  const msg = await bird.email.send({
    from: "onboarding@messagebird.dev",
    to: ["delivered@messagebird.dev"],
    subject: "Hello from Bird",
    html: "<p>My first Bird email.</p>",
  });

  console.log(msg.id, msg.status); // "em_…", "accepted"
  return { id: msg.id, status: msg.status };
}
```

Examples: [TypeScript](/es-es/email-api/nextjs.ts.md)

Onboarding sender and sandbox recipient only. This page does not send an email or contain a key.

[Download the Next.js code sample](/downloads/email-nextjs-sample.zip)

[Read the setup guide](/docs/get-started/quickstarts/typescript/next-js/email)

ZIP with the displayed request, setup notes and an empty key template. A sandbox code sample, not a complete application. SDK version in the sample: 0.67.0; review current maintained setup before adapting it.

### Connect an App Router form

The bundle adds this wrapper for an existing App Router application. It awaits the action without returning its result to the form; the accepted ID/status stays in the server log. Authorize callers before exposing the action.

**Node.js**: `Existing TypeScript App Router application`

File: `app/page.tsx`

Run: `Keep local until caller authorization is implemented`

```typescript
import { sendWelcome } from "./actions/send-welcome";

export default function Home() {
  async function submit(): Promise<void> {
    "use server";
    await sendWelcome();
  }

  return (
    <form action={submit}>
      <button type="submit">Send sandbox email</button>
    </form>
  );
}
```

Examples: [TypeScript](/es-es/email-api/nextjs.ts.md)

ILLUSTRATIVE RESULT / 202 ACCEPTED

em_01ky7ma8y2es1s2akzk53tmjn0 accepted

The returned ID lets you retrieve the message and follow recipient events. Acceptance does not prove delivery or inbox placement.

### If your sender is not verified

A sender outside your verified domain or the onboarding domain is refused before sending. Correct the sender setup; a rejected request is not a delivery event.

[Sending domains guide](/docs/guides/email/sending-domains)

### If the response is missing

Keep the original operation unresolved and inspect its record before repeating it. The SDK reuses identity for retries within one call; a new invocation normally creates a new operation. Your application owns durable job identity and deliberate replay. Completed responses are retained for three hours; after expiry, the same key can start a new operation. Retention does not make side effects atomic. Follow the idempotency guide before replaying. This sample does not provide a retry queue.

[Idempotency and recovery guide ↗](/docs/guides/idempotency)

[SDK request and retry options](/docs/sdks/typescript)

[Full installation and run steps](/docs/get-started/quickstarts/typescript/next-js/email)

02

RUNTIME

## Runtime and installation.

Bird’s Next.js quickstart uses an App Router Server Action with TypeScript and @messagebird/sdk. Use Node.js 20.9+ for the maintained Next.js quickstart; the SDK alone requires Node.js 20.3+.

03

DECISION

## Choose where to send.

Choose a Server Action when a form already belongs to the App Router. Choose a route handler when another client needs an HTTP endpoint; validate and authorize that request before sending.

04

OPERATION

## Track delivery and retries.

Validate submitted form data and enforce who may trigger a send. A server directive protects the key, but does not authorize the caller. A transport error or “send failed” log can leave acceptance unknown; reconcile the original operation before retrying.

AFTER ACCEPTANCE

## Prepare for production sending.

Verify a production domain, keep your key on the server, and follow the recipient outcome separately from request acceptance.

For example, 10,000 signups with one welcome and one follow-up imply 20,000 planned sends before other traffic. Confirm actual processed units and peak daily volume, then compare included units, domain/webhook limits, overage and the send ceiling. Count dedicated IPs or other Email products separately where applicable. Sandbox testing is not an unlimited free-production offer.

[Current Email plans and usage rates ↗](/products/email/pricing) · [Compare provider responsibilities and commercial units ↗](/products/email/compare)

[01 Configure the sender Workspace, key and a verified production domain. ↗](/products/email/getting-started)

[02 Send from your stack Installation, execution and request errors. ↗](/docs/get-started/quickstarts/typescript/next-js/email)

[03 Observe the result Recipient events and deliberate recovery. ↗](/docs/guides/email/events)

[Choose an Email product ↗](/email)

[Next.js ↗](/email-api/nextjs)

[Node.js ↗](/email-api/nodejs)

[Python ↗](/email-api/python)

YOUR NEXT CONNECTION

## Your next send. A supported beginning.

[Open the quickstart](/docs/get-started/quickstarts/typescript/next-js/email)

[Talk to sales](/demo?product=email&source_page=%2Femail-api%2Fnextjs)



## Related resources

- [Getting started with email](/learn/email/getting-started-with-email) (video)
- [Send your first email](/docs/get-started/send-your-first-email) (docs)
- [Build your first integration](/learn/paths/integration) (course)

[Get an implementation brief](/learn/workspace?topic=email)