当前位置：首页 > news >正文

【Next.js 入门教程系列】08-发送邮件

news 文章来源：https://blog.csdn.net/qq_54869075/article/details/142869241 2025/5/7 23:24:13

原文链接

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 this"preview-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 (<Html><Preview>Welcome aborad!</Preview><Body><Container><Text>Hello {name}</Text><Link href="http://dino.castamerego.com">www.dino.castamerego.com</Link></Container></Body></Html>);
};
export default WelcomeTemplate;

Preview Email

本章代码链接

首先在 .gitignore 中添加 .react-email，以防产生的大量文件污染 git。使用 npm preview-email 命令，打开浏览器，访问对应端口(笔者设置的是 localhost:5051)即可看到

Preview Email

Style Email

本章代码链接

我们可以直接使用 CSS 来添加样式，也可以直接使用 Tailwind，这里把两种都给出

CSS
TailWind

# 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 (<Html><Preview>Welcome aborad!</Preview><Body style={body}><Container><Text style={heading}>Hello {name}</Text><Link href="http://dino.castamerego.com">www.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 (<Html><Preview>Welcome aborad!</Preview>{/* 将 Body 用 <Tailwind> 包起来*/}<Tailwind><Body className="bg-white"><Container><Text className="font-bold text-3xl">Hello {name}</Text><Link href="http://dino.castamerego.com">www.dino.castamerego.com</Link></Container></Body></Tailwind></Html>);
};export default WelcomeTemplate;

Sending Emails

本章代码链接

使用 npm i resend@1.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: "castamere@gmail.com",subject: "...",react: <WelcomeTemplate name="Castamere" />,});return NextResponse.json({});
}

下一篇讲优化技巧

下一篇【Next.js 入门教程系列】09-优化技巧

【Next.js 入门教程系列】08-发送邮件

原文链接 CSDN 的排版/样式可能有问题，去我的博客查看原文系列吧，觉得有用的话， 给我的库点个star，关注一下吧上一篇【Next.js 入门教程系列】07-身份验证发送邮件 Setting Up React Email React Email 是一个高效便捷的 E…...

编程日记 2024/10/14 2:22:51

Echarts合集更更更之树图

实现效果写在最后🍒 源码，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云...

编程日记 2024/10/14 2:21:49

线性代数行列式

一、行列式 1、定义一个数学概念，主要用于线性代数中，它是一个可以从方阵（即行数和列数相等的矩阵）形成的一个标量（即一个单一的数值） 2、二阶行列式 ，像这样将一个式子收缩称为一个 2*2 的…...

编程日记 2024/10/14 2:20:48

Ubuntu 通过 Docker 搭建 GitLab

准备工作 1.）更新软件。确保你的系统是最新 sudo apt update sudo apt upgrade -y 2.）安装 Docker 和 Docker Compose。参考：Ubuntu 上安装 Docker-CSDN博客 1. 创建 GitLab 目录创建一个用于存储 GitLab 数据和配置的目录&#xff1…...

编程日记 2024/10/14 2:16:31

原来CDC数据同步可以这么简单，零代码可视化一键数据同步

当前企业实时同步与分析场景中面临的挑战： 随着业务发展需要，实时分析成为企业目前的强需求，成为支撑企业业务发展的必须项。一般来说，要满足数据实时分析的诉求，通常有两种方案： 第一种是直接使用源端…...

编程日记 2024/10/14 2:14:29

Ubuntu环境使用 Whisper 与 ZhipuAI 实现本地批量视频转录与文本标点复原（本地亲测可用）

使用 Whisper 与 ZhipuAI 实现批量视频转录与文本标点添加在本篇博客中，我们将介绍一个实用的项目，帮助初学者了解如何使用 Whisper 和 ZhipuAI 的 API 来进行视频转录和文本处理。这个项目主要功能是将视频转录成文本，并利用大语言模型为转…...

编程日记 2024/10/14 2:12:27

SPI机制

一、SPI简介 SPI（Service Provider Interface）机制是一种服务发现机制，广泛用于Java生态中。它允许框架或库通过接口解耦具体实现，用户可以在运行时动态地提供接口的实现，而不是在编译时确定。这种机制在很多场景下非…...

编程日记 2024/10/14 2:11:26

生信分析流程：从数据准备到结果解释的完整指南

介绍生物信息学（生信）分析是一个复杂的过程，涉及从数据准备到结果解释的多个步骤。随着高通量测序技术的发展和生物数据的迅猛增长，了解和掌握生信分析的标准流程变得尤为重要。这不仅有助于提高分析的准确性，还能优…...

编程日记 2024/10/14 2:08:23

golang语法

参考链接：https://www.runoob.com/go/ 创建变量 // 3种方法 var a int a : 10 // 类型推断 a : make() // 复合类型循环 // 3种循环 for i : 0; i < 10; i {// 循环体} // 传统for循环 for index, num : range nums {// 循环体} // nums是可迭代的复合类型…...

编程日记 2024/10/14 2:07:21

【fisco学习记录2】多群组搭建

说明文档参考： 多群组部署 — FISCO BCOS 2.0 v2.11.0 文档 (fisco-bcos-documentation.readthedocs.io) 多群组搭建之前，先暂停之前的单群组，并删除： cd fisco bash nodes/127.0.0.1/stop_all.sh rm -rf nodes/ 实现图&…...

编程日记 2024/10/14 2:05:19

深度解读：路由交换、负载均衡与防火墙的网络交响

一、路由交换：网络流动的“大动脉” 1. 路由：决定命运的“路径规划师” 路由技术如同现代交通网络中的导航系统，决定了数据从起点到终点的最佳路径。路由器基于网络层IP地址，对每个数据包进行精确的路径选择，并确保其…...

编程日记 2024/10/14 2:04:18

linux线程 | 线程的控制（二）

前言： 本节内容是线程的控制部分的第二个小节。主要是列出我们的线程控制部分的几个细节性问题以及我们的线程分离。这些都是需要大量的代码去进行实验的。所以， 准备好接受新知识的友友们请耐心观看。现在开始我们的学习吧。 ps:本节内容适合了解线程…...

编程日记 2024/10/14 2:03:17

npm install报错一堆sass gyp ERR!

执行npm install ，出现一堆gyp含有sass错误的情况下。解决办法： 首页可能是node版本问题，太高或者太低，也会导致npm install安装错误（不会自动生成node_modules文件），本次试验，刚开…...

编程日记 2024/10/14 2:02:15

微知-BlueField DPU在lspci中显示Flash Recovery是什么意思？

效果： lspci |grep BlueField10:00.0 Memory controller: Mellanox Technologies MT42822 Family [BlueField-2 SoC Flash Recovery] (rev 01)*原因： 表示此时flash是empty空的，或者在flash中的FW是无法工作的。比如烧录错误。这里指的一提…...

编程日记 2024/10/14 2:01:14

【前端知识点】前端笔记

css 引入css文件的文件路径   <link rel"stylesheet" href"./">  <link rel"stylesheet" href"../">j…...

编程日记 2024/10/14 2:00:13

Sping Cache 使用详解

缓存是提升应用性能的常用手段。它通过将耗时的操作结果存储起来，下次请求可以直接从缓存中获取，从而避免重复计算或查询数据库，显著减少响应时间和服务器负载。Spring 框架提供了强大的缓存抽象 Spring Cache，它简化了缓存的使用…...

编程日记 2024/10/14 1:56:09

1. 机器翻译与数据集 import os import torch from d2l import torch as d2l#save d2l.DATA_HUB[fra-eng] (d2l.DATA_URL fra-eng.zip,94646ad1522d915e7b0f9296181140edcf86a4f5)#save def read_data_nmt():"""载入“英语－法语”数据集"&qu…...

编程日记 2024/10/14 1:55:09

Python网络爬虫技术

Python网络爬虫技术详解引言网络爬虫（Web Crawler），又称网络蜘蛛（Web Spider）或网络机器人（Web Robot），是一种按照一定规则自动抓取互联网信息的程序或脚本。它们通过遍历网页链…...

编程日记 2024/10/14 1:54:08

黑马程序员-redis项目实践笔记1

目录一、基于Session实现登录发送验证码验证用户输入验证码校验登录状态 Redis代替Session登录发送验证码修改验证用户输入验证码登录拦截器的优化二、商铺查询缓存缓存更新策略数据库和缓存不一致解决方案缓存更新策略的最佳实践方案实现商铺缓…...

编程日记 2024/10/14 1:53:07

ES-入门聚合查询

url 请求地址 http://192.168.1.108:9200/shopping/_search {"aggs": { //聚合操作"price_group":{ //名称,随意起名"terms":{ //分组"field": "price" //分组字段}}} } 查询出来的结果是查询结果中价格的平均值 {&q…...

编程日记 2024/10/14 1:52:06

七维大脑：探索人类认知的未来之路

七维大脑： 探索人类认知的未来之路随着科技的不断发展，人们对于大脑的认知也在不断扩展。近年来，科学家们提出了一个名为“七维大脑”的概念，试图通过七个维度来理解人类的认知过程。这个概念的提出，让人们开始思考&…...

编程日记 2024/10/14 1:49:02

spring |Spring Security安全框架 —— 认证流程实现

文章目录开头简介环境搭建入门使用1、认证1、实体类2、Controller层3、Service层3.1、接口3.2、实现类3.3、实现类：UserDetailsServiceImpl 4、Mapper层3、自定义token认证filter 注意事项小结开头 Spring Security 官方网址：Spring Security官网开…...

编程日记 2024/10/14 1:48:01

Django+vue自动化测试平台---正式开源！！！

自动化测试：接口、Web UI 与 App 的全面探索在此郑重声明：本文内容未经本人同意，不得随意转载。若有违者，必将追究其法律责任。同时，禁止对相关源码进行任何形式的售卖行为，本内容仅供学习使用。 Git 地…...

编程日记 2024/10/14 1:44:58

电子电气架构 --- 智能网联汽车未来是什么样子？

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：屏蔽力是信息过载时代一个人的特殊竞争力，任何消耗你的人和事，多看一眼都是你的不对。非必要不费力证明自己，无利益不试图说服别人，是精神上的节…...

编程日记 2024/10/14 1:42:55

docker安装elasticsearch(es)+kibana

目录 docker安装elasticsearch 一.准备工作 1.打开docker目录 2.创建elasticsearch目录 3.打开elasticsearch目录 4.拉取elasticsearch镜像 5.检查镜像二.挂载目录 1.创建数据挂载目录 2.创建配置挂载目录 3.创建插件挂载目录 4.权限授权三.编辑配置 1.打开con…...

编程日记 2024/10/14 1:37:50

大厂面试真题-说说redis的雪崩、击穿和穿透

缓存雪崩、击穿、穿透是缓存系统中常见的三种问题，它们都会对系统的性能和稳定性造成严重影响。以下是对这三种问题的详细解释以及相应的解决方案： 一、缓存雪崩问题解释： 缓存雪崩指的是因为某些原因导致缓存中大量的数据同时失效或过期…...

编程日记 2024/10/14 1:36:49

【Spring】获取Cookie和Session（@CookieValue()和@SessionAttribute()）

获取 Cookie 传统获取 Cookie 这是没有 Spring 的时候，用 Servlet 来获取（获取所有的 Cookie） Spring MVC 是基于 Servlet API 构建的原始 Web 框架，也是在 Servlet 的基础上实现的 RequestMapping("/getcookie") …...

编程日记 2024/10/14 1:35:48

【C++打怪之路Lv8】-- string类

🌈 个人主页：白子寰 🔥 分类专栏：重生之我在学Linux，C打怪之路，python从入门到精通，数据结构，C语言，C语言题集👈 希望得到您的订阅和支持~ 💡 坚持…...

编程日记 2024/10/14 1:34:47

【JS】node.js压缩文件的方式

在 Node.js 中，有多种方法可以压缩文件。以下是几种常见的压缩方式及其对应的代码示例： 使用 archiver 压缩成 ZIP 文件使用 zlib 压缩成 GZIP 文件使用 tar 压缩成 TAR 文件 1. 使用 archiver 压缩成 ZIP 文件 archiver 是一个功能强大的库&#xff…...

编程日记 2024/10/14 1:33:45

2024免费mac苹果电脑清理垃圾软件CleanMyMac X4.15.8

对于苹果电脑用户来说，设备上积累的垃圾文件可能会导致存储空间变得紧张，影响电脑的性能和使用体验。尤其是那些经常下载和安装新应用、编辑视频或处理大量照片的用户，更容易感受到存储空间的压力。面对这种情况，寻找一种有效的苹…...

编程日记 2024/10/14 1:32:44

原文链接

上一篇【Next.js 入门教程系列】07-身份验证

发送邮件

Setting Up React Email​

Careate Email Template​

Preview Email​

Style Email​

Sending Emails​

下一篇【Next.js 入门教程系列】09-优化技巧

相关文章：

Setting Up React Email

Careate Email Template

Preview Email

Style Email

Sending Emails