Javascript
Enviar e-mails com Next.js
Aprenda a enviar seu primeiro e-mail com Next.js usando o nosso SDK para Node.js
Pré-requisitos
Para aproveitar este guia, você precisará:
- Next.js - Versão mais recente
1. Instalar SDK
Obtenha o Kankei SDK para Node.js
npm i @yotei/kankei
2. Crie um componente de e-mail
Comece criando seu modelo de e-mail em emails/example.tsx
import { Head } from "@react-email/components";
interface EmailExampleProps {
name: string;
}
export function EmailExample({ name }: EmailExampleProps) {
return (
<Head>
<title>Bem-vindo, {name}!</title>
</Head>
);
}
3. Usando React
Crie um arquivo de rota em app/api/email/route.ts
se estiver usando o App Router
ou crie um arquivo de API em pages/api/email.ts
se estiver usando o Pages Router.
Importe o modelo de e-mail React e envie um e-mail usando o parâmetro react.
import { EmailExample } from '@/emails/example';
import { Kankei } from '@yotei/kankei';
const kankei = new Kankei('kankei_cFnbdF...');
export async function POST() {
try {
const { data, error } = await kankei.email.create({
to: ['email-do-cliente@email.com'],
subject: 'Olá mundo!',
react: EmailExample({ name: 'Nome do Cliente' }),
});
if (error) {
return Response.json({ error }, { status: 500 });
}
return Response.json(data);
} catch (error) {
return Response.json({ error }, { status: 500 });
}
}
import type { NextApiRequest, NextApiResponse } from 'next';
import { EmailExample } from '@/emails/example';
import { Kankei } from '@yotei/kankei';
const kankei = new Kankei('kankei_cFnbdF...');
export default async (request: NextApiRequest, response: NextApiResponse) => {
const { data, error } = await kankei.email.create({
to: ['email-do-cliente@email.com'],
subject: 'Olá mundo!',
react: EmailExample({ name: 'Nome do Cliente' }),
});
if (error) {
return response.status(400).json(error);
}
response.status(200).json(data);
};