Framework Integrations
Relevant source files
The following files were used as context for generating this wiki page:
The Resend Node.js SDK provides a unified interface for integrating email capabilities into modern JavaScript and TypeScript frameworks. It supports various runtimes and build tools, including Node.js (version 20 and higher), Next.js, and Bun, ensuring compatibility across edge and serverless environments.
Sources: package.json:9-11, readme.md:20-31
The integration architecture focuses on providing developers with a consistent API for sending emails using HTML or React components, managing templates, and handling complex workflows like batch sending and webhook verification.
Supported Frameworks and Runtimes
The project maintains end-to-end (e2e) verification and official guides for several popular frameworks to ensure reliable performance.
Framework Compatibility List
| Framework | Integration Method | Reference |
|---|---|---|
| Next.js | App Router & Pages Router | readme.md:46-47 |
| Express | Standard Node.js Middleware | readme.md:48 |
| React | Component-based Templates | readme.md:95-108 |
| Remix | Server-side actions | readme.md:24 |
| Nuxt | Vue-based server integration | readme.md:25 |
| Hono | Ultrafast web framework | readme.md:28 |
| Astro | Islands architecture | readme.md:30 |
Sources: readme.md:22-31, readme.md:45-48
Build and Execution Testing
The SDK uses a specialized e2e suite to verify framework compatibility. This process involves creating temporary copies of integration projects and linking them to a local build of the SDK. This ensures that the SDK functions correctly with tools like esbuild and Next.js's turbopack.
Sources: e2e/e2e.spec.ts:25-50, package.json:48
The diagram above shows the end-to-end verification flow for framework integrations. Sources: e2e/e2e.spec.ts:10-85
React Email Integration
The SDK integrates with @react-email/render to transform React components into email-ready HTML. This is an optional peer dependency, allowing the SDK to remain lightweight for users who only require plain HTML or text emails.
Sources: package.json:80-87, src/templates/templates.ts:58-60
Component Rendering Logic
When you pass a React component to the react property of an email or template request, the SDK executes an internal render function. This function uses the render method from the @react-email/render package.
Sources: src/templates/templates.ts:57-61, readme.md:109-122
This sequence illustrates the transformation of a React component into HTML before it reaches the Resend API. Sources: src/templates/templates.ts:55-65, readme.md:109-122
Integration Configurations
API Initialization
You initialize the SDK using an API key retrieved from the Resend Dashboard. The SDK is designed for server-side use to protect sensitive credentials.
import { Resend } from 'resend';
const resend = new Resend('re_123456789');
Sources: readme.md:52-56
Request Options
Every method in the SDK accepts a RequestOptions object as the final argument. This provides standard integration hooks for handling network-level concerns:
- AbortSignal: You can use
AbortControllerto cancel requests or implement custom timeouts. - Custom Headers: You can append custom headers for tracing or specific API features like idempotency.
Sources: readme.md:128-152, src/templates/templates.ts:40-43
Template System Integration
The template system allows frameworks to manage reusable email structures. It supports a "Chainable Result" pattern that enables publishing a template immediately after creation or duplication in a single logical flow.
Sources: src/templates/templates.ts:44-48, src/templates/templates.spec.ts:503-535
Automation and Template Data Flow
The SDK provides utility functions to convert framework-friendly camelCase payloads into the snake_case format required by the Resend API. This transformation handles:
- Variable mappings (e.g.,
fallbackValuetofallback_value). - Template identifiers.
- Conditional logic configuration for automations.
Sources: src/common/utils/parse-template-to-api-options.spec.ts:25-50, src/common/utils/parse-automation-to-api-options.spec.ts:114-140
Summary
Framework integrations in the Resend Node.js SDK are built on a foundation of wide runtime support (Node.js, Bun) and optional high-level abstractions like React rendering. By utilizing e2e testing with absolute path linking, the project ensures that the library remains compatible with evolving build systems like Next.js and esbuild while maintaining a clean, developer-focused API.
Sources: e2e/e2e.spec.ts:70-85, package.json:9-15, readme.md:15-32