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

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

news 2025/10/1 5:52:04

原文链接

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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

🧠 智能合约中的数据是如何在区块链中保持一致的？ 为什么所有区块链节点都能得出相同结果？合约调用这么复杂，状态真能保持一致吗？本篇带你从底层视角理解“状态一致性”的真相。一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/7/12 23:55:04

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...

编程新知 2025/9/30 13:11:20

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/9/22 20:53:03