本文学习如何在Next.js项目中发送电子邮件。
设置Next Email
发送电子邮件有个强大的库叫React Email。
React Email提供一些组件用于创建HTML Email，同时也提供工具预览电子邮件以及提供函数来发送邮件。
安装：
npm install react-email @react-email/components再到package.json，修改script：
“preview-email”:”email dev -p 3050″
默认情况下使用 3000 端口，为了避免冲突我们使用3050端口。
再到根目录下，新建emails目录，这是承载电子邮件模板的目录。
创建电子邮件模板
在emails目录下新建WelcomeTemplate.tsx文件，名字是随意的。
从react-email导入一些用于创建Html邮件的组件，并创建一个简单的模板。
预览电子邮件
运行命令来启动电子邮件项目，但在此之前，我们将 .react-email文件夹 加入 .gitignore，否则在该文件夹下自动产生的数千个文件都会被跟踪。
打开 .gitignore, 添加 .react-email/ , 注意斜杠不要忘写。
然后执行：
npm run preview-email
完成后访问 http://localhost:3050，能看到我们刚建的邮件模板，我们可以直接发送邮件，而不用设置邮件服务器。
电子邮件样式
有两种方法样式化电子邮件，一是使用CSSProperties，二是使用Tailwind。
首先使用CSSProperties，导入CSSProperties，然后创建一个body对象，在body里设置相关CSS样式，再将body赋给style。
查看浏览器，样式生效了。
再来看看使用 Tailwind。
从react-email导入Tailwind，再用Tailwind组件将 body包起来，然后就可以像普通使用Tailwind一样使用它了。
发送电子邮件
查看react.email文档，得知到有个Resend可以用于发送电子邮件，Resend也是由react.email团队开发的。我们访问Resend官网查看使用说明：
如果没有账户就注册一个，生成API Key，记录。
修改.env 文件，添加API Key环境变量RESEND_API_KEY。
再安装resend。
npm i resend@1.0.0
最后，创建一个API端点，用于发送邮件。实际项目一般是提交某个表单触发电子邮件的发送，这里就处理POST方法。
在api目录创建send-email目录，再新建route.tsx文件。在该文件中，创建POST方法，利用resend.emails.send方法发送邮件，提供邮件模板组件及必要的参数就可以发送了。
小结
本文介绍了如何在Next.js项目中发送电子邮件。
下一篇介绍Next.js的优化。