# App Router: the send lives in a route handler, nowhere else

Create `app/api/send/route.ts` exporting an async `POST`. Construct the Resend
client at module scope of that server-only file.

```ts
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST() {
  const { data, error } = await resend.emails.send({
    from: '[SENDER]',
    to: ['[RECIPIENT]'],
    subject: 'Hello World',
    html: '<strong>It works!</strong>',
  });

  if (error) {
    return Response.json({ error }, { status: 400 });
  }
  return Response.json({ id: data.id });
}
```

## Checklist

- The Resend import and the key stay in files under `app/api`. Never import the
  client into a client component; the key would ship to the browser.
- Do not use a NEXT_PUBLIC_ variable for the key. If the name starts with
  NEXT_PUBLIC_, it is public. The send key must not be.
- Return a proper status when `error` is set. A 200 with an empty body hides the
  failure from your frontend.
- The guide's React example passes a component via the `react` prop. That path
  renders on the server inside the route handler, which is exactly where it
  belongs.