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

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

news 2025/8/10 13:07:09

原文链接

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

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/8/5 3:06:41

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点： 路径验证：确保相对路径.…...

编程新知 2025/7/20 19:24:22

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。核心特性与用法基本属性 v-model：绑定右侧列表的值&…...

编程新知 2025/8/4 3:44:23

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/7/25 10:29:46

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2025/8/7 6:57:55

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及，充电桩作为核心配套设施，其安全性与可靠性备受关注。然而，在高温、高负荷运行环境下，充电桩的散热问题与消防安全隐患日益凸显，成为制约行业发展的关键瓶颈。如何通过智慧化管理手段优化散…...

编程新知 2025/8/6 0:05:40

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...

编程新知 2025/7/29 12:19:45

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例，其中使用的是 Module Federation 和 npx-build-plus 实现了主应用（Shell）与子应用（Remote）的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/6/15 10:41:11

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学（silicon photonics）的光波导（optical waveguide）芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中，光既是波又是粒子。光子本…...

编程新知 2025/8/4 3:44:09

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2025/8/6 12:50:22

原文链接

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