网站开发安全问题,wordpress网易云插件,网站免费备案,做ps网页设计的网站有哪些原文链接 CSDN 的排版/样式可能有问题#xff0c;去我的博客查看原文系列吧#xff0c;觉得有用的话#xff0c; 给我的库点个star#xff0c;关注一下吧 上一篇【Next.js 入门教程系列】07-身份验证
发送邮件
Setting Up React Email
React Email 是一个高效便捷的 E…原文链接 CSDN 的排版/样式可能有问题去我的博客查看原文系列吧觉得有用的话 给我的库点个star关注一下吧 上一篇【Next.js 入门教程系列】07-身份验证
发送邮件
Setting Up React Email
React Email 是一个高效便捷的 Email 库包含多个组件包括编写发送等等功能。使用 npm i react-email react-email/components 安装
安装好打开 package.json在 scripts 中添加 preview-email: email dev -p 5051 script
scripts: {dev: next dev -- -p 5050,build: next build,start: next start -- -p 5050,lint: next lint,// Add thispreview-email: email dev -p 5051
},Careate Email Template
本章代码链接
在根目录下(app 同级目录)创建 emails 文件夹在其中创建 WelcomeTemplate.tsx。如下就是一个邮件的模板会将输入用户的名字添加到其中
# emails/WelcomeTemplate.tsximport React from react;
import {Html,Body,Container,Text,Link,Preview,
} from react-email/components;const WelcomeTemplate ({ name }: { name: string }) {return (HtmlPreviewWelcome aborad!/PreviewBodyContainerTextHello {name}/TextLink hrefhttp://dino.castamerego.comwww.dino.castamerego.com/Link/Container/Body/Html);
};
export default WelcomeTemplate;
Preview Email
本章代码链接
首先在 .gitignore 中添加 .react-email以防产生的大量文件污染 git。使用 npm preview-email 命令 打开浏览器访问对应端口(笔者设置的是 localhost:5051)即可看到 Style Email
本章代码链接
我们可以直接使用 CSS 来添加样式也可以直接使用 Tailwind这里把两种都给出
CSSTailWind
# emails/WelcomTemplate.tsx// Use CSS
import React, { CSSProperties } from react;
import {Html,Body,Container,Text,Link,Preview,
} from react-email/components;const WelcomeTemplate ({ name }: { name: string }) {return (HtmlPreviewWelcome aborad!/PreviewBody style{body}ContainerText style{heading}Hello {name}/TextLink hrefhttp://dino.castamerego.comwww.dino.castamerego.com/Link/Container/Body/Html);
};const body: CSSProperties {background: #fff,
};const heading: CSSProperties {fontSize: 32px,
};export default WelcomeTemplate;
# emails/WelcomTemplate.tsx// Use TailWind
import React, { CSSProperties } from react;
import {Html,Body,Container,
// import TailwindTailwind,Text,Link,Preview,
} from react-email/components;const WelcomeTemplate ({ name }: { name: string }) {return (HtmlPreviewWelcome aborad!/Preview{/* 将 Body 用 Tailwind 包起来*/}TailwindBody classNamebg-whiteContainerText classNamefont-bold text-3xlHello {name}/TextLink hrefhttp://dino.castamerego.comwww.dino.castamerego.com/Link/Container/Body/Tailwind/Html);
};export default WelcomeTemplate;
Sending Emails
本章代码链接
使用 npm i resend1.0.0 安装 resend 用于发送邮件。进入Resend官网注册账号获取一个 API Key并添加到 .env 中设置 RESEND_API_KEY... 即可。在 api/ 中添加 send-email/route.tsx调用 resend.emails.send() 即可
# api/send-email/route.tsximport WelcomeTemplate from /emails/WelcomeTemplate;
import { NextResponse } from next/server;
import { Resend } from resend;const resend new Resend(process.env.RESEND_API_KEY!);export async function POST() {await resend.emails.send({from: ...,to: castameregmail.com,subject: ...,react: WelcomeTemplate nameCastamere /,});return NextResponse.json({});
}
下一篇讲优化技巧
下一篇【Next.js 入门教程系列】09-优化技巧
