{"content":"# Resend Setup\n\nConfigure Resend for transactional emails like password resets and email verification.\n\n### MCP Server\n\nAdd the Resend MCP server for accurate API guidance:\n\n```bash\nbunx add-mcp https://resend.com/docs/mcp -y\n```\n\nThis updates all detected agents automatically. If no agents are detected, add `-a opencode -a cursor` to the command or prompt the user to specify what agents they want to use for this project.\n\n---\n\n### Step 1: Install the packages\n\n```bash\nbun add resend @react-email/components\n```\n\nThe `@react-email/components` package is required for Resend to render React email templates.\n\n### Step 2: Add environment variables\n\nAdd to your `.env.development`:\n\n```env\nRESEND_API_KEY=\"re_your_api_key\"\nRESEND_FROM_EMAIL=\"Your App <noreply@yourdomain.com>\"\n```\n\nThen sync to Vercel with `bun run env:push`.\n\nGet your API key from [resend.com/api-keys](https://resend.com/api-keys).\n\n### Step 3: Create the resend config\n\nCreate the Resend config with email format validation:\n\n```typescript\n// src/lib/resend/config.ts\nimport { z } from \"zod\";\nimport { configSchema, server } from \"better-env/config-schema\";\n\nexport const resendConfig = configSchema(\"Resend\", {\n  apiKey: server({ env: \"RESEND_API_KEY\" }),\n  fromEmail: server({\n    env: \"RESEND_FROM_EMAIL\",\n    schema: z\n      .string()\n      .regex(\n        /^.+\\s<.+@.+\\..+>$/,\n        'Must match \"Name <email@domain.com>\" format.',\n      ),\n  }),\n});\n```\n\n### Step 4: Create the Resend client\n\nCreate the Resend client instance:\n\n```typescript\n// src/lib/resend/client.ts\nimport { Resend } from \"resend\";\nimport { resendConfig } from \"./config\";\n\nexport const resend = new Resend(resendConfig.server.apiKey);\n```\n\n### Step 5: Create the send helper\n\nCreate the email sending helper:\n\n```typescript\n// src/lib/resend/send.ts\nimport { resend } from \"./client\";\nimport { resendConfig } from \"./config\";\n\ntype SendEmailParams = {\n  to: string | string[];\n  subject: string;\n  react: React.ReactElement;\n  from?: string;\n};\n\nexport async function sendEmail({ to, subject, react, from }: SendEmailParams) {\n  const { data, error } = await resend.emails.send({\n    from: from ?? resendConfig.server.fromEmail,\n    to: Array.isArray(to) ? to : [to],\n    subject,\n    react,\n  });\n\n  if (error) {\n    throw new Error(`Failed to send email: ${error.message}`);\n  }\n\n  return data;\n}\n```\n\n---\n\n## Usage\n\n```typescript\nimport { sendEmail } from \"@/lib/resend/send\";\n\nawait sendEmail({\n  to: \"user@example.com\",\n  subject: \"Welcome!\",\n  react: <WelcomeEmail name=\"John\" />,\n});\n```\n\n### Create email templates\n\nEmail templates are React components colocated with the feature that uses them, following the \"everything is a library\" pattern. Auth-related emails (password reset, email verification) live in `src/lib/auth/emails/`, while other features would have their own `emails/` subfolder.\n\nFor example, a password reset email template:\n\n```typescript\n// src/lib/auth/emails/forgot-password.tsx\ninterface ForgotPasswordEmailProps {\n  resetLink: string;\n}\n\nexport function ForgotPasswordEmail({ resetLink }: ForgotPasswordEmailProps) {\n  return (\n    <div>\n      <h1>Reset Your Password</h1>\n      <p>Click the link below to reset your password:</p>\n      <a href={resetLink}>Reset Password</a>\n      <p>If you did not request a password reset, please ignore this email.</p>\n    </div>\n  );\n}\n```\n\n---\n\n## File Structure\n\n```\nsrc/lib/resend/\n  config.ts    # Environment validation\n  client.ts    # Resend client instance\n  send.ts      # Email sending helper\n\nsrc/lib/auth/emails/\n  forgot-password.tsx    # Password reset template\n```\n\n---\n\n## References\n\n- [Resend Next.js Guide](https://resend.com/docs/send-with-nextjs)\n- [React Email](https://react.email/)"}