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

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

news 2026/5/16 18:38:10

原文链接

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

动力电池技术迭代：从能量密度到系统集成的多维竞争

1. 动力电池行业的“肌肉”意味着什么最近，行业里关于宁德时代又推出新产品的消息传得沸沸扬扬。作为在这个行业里摸爬滚打了十几年的老兵，每次看到这样的新闻，我的第一反应不是“又来了”，而是“这次他们想解决什么问题&#xff…...

编程新知 2026/5/16 18:30:17

HTML图片怎么在Firefox中调试对齐_Firefox开发者工具调图方法.txt

连接数爆满主因是线程卡住而非数量多，应重点关注SHOW FULL PROCESSLIST中State非Sleep且Time＞60秒的阻塞线程，优先排查应用端连接未释放、监控脚本高频查询及本地进程异常连接。直接看 SHOW PROCESSLIST 里哪些线程在“卡住”连接数爆满&…...

编程新知 2026/5/16 17:29:14

观察不同模型在Taotoken平台上的实际Token消耗速率

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度观察不同模型在Taotoken平台上的实际Token消耗速率对于依赖大模型API进行开发的团队和个人而言，成本控制是一个持续关…...

编程新知 2026/5/16 17:12:16

FPGA新手避坑指南：用Vivado IP核搞定AXI总线，从看懂波形开始

FPGA新手避坑指南：用Vivado IP核搞定AXI总线，从看懂波形开始第一次在Vivado中看到AXI总线波形时，我盯着屏幕上跳动的信号线完全摸不着头脑。VALID和READY信号像在玩捉迷藏，突发传输的时序如同天书——这大概是每个FPGA初学者都会…...

编程新知 2026/5/16 16:27:26

初探Taotoken平台提供的APIKey管理与访问控制功能

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度初探Taotoken平台提供的APIKey管理与访问控制功能效果展示类，作者以新用户视角，探索并描述在Taotoken控制…...

编程新知 2026/5/16 15:26:39

Codex 上下文提供详解与操作指南

1. 文档目标这份文档解决的是一个非常实际的问题： 怎么给 Codex 足够完整的上下文什么信息是必须给的，什么信息是可选但高价值的怎样让 Codex 在一次任务里快速进入正确状态怎样避免“我已经说了很多，但结果还是不对”怎样把上下文提供方式变…...

编程新知 2026/5/16 14:47:40

在多模型AI应用开发中利用Taotoken实现成本与性能的平衡

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度在多模型AI应用开发中利用Taotoken实现成本与性能的平衡开发一个复杂的AI应用，往往意味着需要调用多个模型来完成不同…...

编程新知 2026/5/16 14:33:06

Mac磁盘工具里找不到APFS格式？别急，可能是你的U盘分区表选错了（GUID分区图详解）

Mac磁盘工具里找不到APFS格式？可能是分区表惹的祸当你准备将外置存储设备格式化为APFS时，却发现磁盘工具里压根没有这个选项——这种场景对Mac用户来说并不陌生。上周帮同事迁移数据时就遇到了这个典型问题：一块全新的SSD移动硬盘插入MacBoo…...

编程新知 2026/5/16 13:35:18

Cool-Request全局请求头配置终极指南：告别重复配置的API测试新体验

Cool-Request全局请求头配置终极指南：告别重复配置的API测试新体验【免费下载链接】cool-request IDEA API、Java Method debug tools 项目地址: https://gitcode.com/gh_mirrors/co/cool-request 你是否厌倦了在每个API请求中重复配置相同的认证Token、内容…...

编程新知 2026/5/16 13:26:51

FreeRTOS任务通知：轻量级任务通信机制的原理与应用实践

1. 项目概述：从“消息队列”到“任务通知”的思维跃迁在嵌入式实时操作系统（RTOS）的开发中，任务间的通信与同步是核心议题。我们习惯了使用队列（Queue）、信号量（Semaphore）、事件组&…...

编程新知 2026/5/16 13:16:12

原文链接

上一篇【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