Send Emails from Next.js App Router: Server Actions & API Routes
Email in the Next.js App Router era
Next.js App Router changed how we think about server-side code in React applications. Server components run on the server by default, server actions let you call server functions from client components, and route handlers replace the old API routes. For email, this means you have multiple clean patterns for sending emails without exposing API keys to the client. The key rule: never import your email API key in a client component. Server actions and route handlers keep your credentials server-side while providing clean interfaces for your UI components.
Pattern 1: server actions for forms
Server actions are the cleanest way to send emails from form submissions. Create a server action (a function with 'use server' directive) that accepts FormData, extracts the fields, and calls the AISend API. Import and call this action from your form component's action prop. The email sending happens entirely on the server — no API route needed, no client-side fetch. Error handling is straightforward: return a result object from the action and use useActionState to display success or error messages. This pattern works perfectly for contact forms, feedback forms, and any user-triggered email.
Pattern 2: route handlers for APIs
For programmatic email sending (webhooks, cron jobs, third-party integrations), use Next.js route handlers. Create a file at app/api/send-email/route.ts and export a POST function that validates the request, calls AISend, and returns a JSON response. Route handlers are ideal when you need to send emails from external triggers — a Stripe webhook processing a payment, a cron job sending daily digests, or an internal tool triggering notifications. Protect your route handler with authentication (API key, JWT, or webhook signature verification) to prevent unauthorized use.
Using React Email with AISend
React Email lets you build email templates as React components, then render them to HTML for sending. Install @react-email/components and create template components in a dedicated directory. Each template is a React component that accepts props (user name, order details, etc.) and returns JSX using React Email's components. To send, render the template to HTML with the render function and pass it to AISend's html field. This gives you type-safe, composable email templates that live in your Next.js codebase and can be previewed with React Email's dev server.
Production best practices
In production Next.js apps, centralize email sending in a lib/email.ts module that initializes the AISend client and exports send functions for each email type (welcome, reset, notification). Use environment variables for the API key (AISEND_API_KEY in .env.local). For high-volume sending, offload to a background job queue — Inngest, Trigger.dev, or Vercel's edge functions work well with Next.js. Always include error handling and logging: if an email fails to send, you need to know about it. Use AISend's webhook events to track delivery and build a complete audit trail of every email your application sends.
Related Posts
Ready to Send Smarter Emails?
3,000 emails/month free. No credit card required.