Email Templates

NextGenKit uses Resend + React Email for transactional emails.

Included Templates

  • emails/welcome.tsx — Welcome email on signup
  • emails/subscription-confirmed.tsx — Payment confirmation
  • emails/payment-failed.tsx — Failed payment notification

Preview

pnpm email:dev

Opens at localhost:3001 with hot reload for template development.

Creating a New Template

Create a new file in emails/:

import { Body, Container, Head, Html, Text } from "@react-email/components"

interface Props {
  name: string
}

export function MyEmail({ name }: Props) {
  return (
    <Html>
      <Head />
      <Body>
        <Container>
          <Text>Hello {name}!</Text>
        </Container>
      </Body>
    </Html>
  )
}

Sending

import { resend } from "@/lib/email"
import { MyEmail } from "@/emails/my-email"

await resend.emails.send({
  from: env.EMAIL_FROM,
  to: "user@example.com",
  subject: "Hello",
  react: MyEmail({ name: "World" }),
})