Resend in a Next.js App Router route handler: keep the client and the key server-side

TL;DR: Send from app/api route handlers with the SDK constructed on the server. The key must never reach a client component or the browser bundle. Never import the client into a client component; the key would ship to the browser. - Do not use a NEXTPUBLIC variable for the key. The send key must not be. - Return a proper status when error is set.

The fix

1. 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.
2. Do not use a NEXTPUBLIC variable for the key. If the name starts with NEXTPUBLIC, it is public. The send key must not be.
3. Return a proper status when error is set. A 200 with an empty body hides the failure from your frontend.
4. 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.

When to use this

• This covers exactly what the title says: Resend in a Next.js App Router route handler.
• You are setting this up for the first time, or auditing an existing setup.
• You want the key gotchas in one place before you start.

When not to use this

• You are doing a different workflow with Resend; these steps are specific to the title above.
• You need the full reference docs; this is the short path, not the manual.

Compatibility

• Not pinned to a specific version; follows current Resend behavior.

Resend's Next.js guide builds the send inside an App Router route.ts POST handler with the client constructed server-side. Verified live at https://resend.com/docs/send-with-nextjs.