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

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

news 2026/1/12 10:11:12

原文链接

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

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是：将一个 Flask Web 应用生成成纯静态 HTML 文件，从而可以部署到静态网站托管服务上，如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...

编程新知 2025/12/25 18:03:56

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由：大部分的转换软件需要收费，要么功能不齐全，而开会员又用不了几次浪费钱，借用别人的又不安全。这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/12/31 17:35:58

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...

编程新知 2025/12/30 23:25:07

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论一、传统路径模型的根本缺陷在经典正方形路径问题中（图1）： mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/10/21 1:07:59

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2026/1/3 7:21:08

Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）

引言工欲善其事，必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后，我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集，就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

编程新知 2026/1/8 16:17:45

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 （一）项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台，其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言，首次接触 OpenBCI 设备时，往…...

编程新知 2026/1/8 16:16:39

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息：libc.so.6: cannot open shared object file: No such file or directory： #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

编程新知 2026/1/10 11:25:52

自然语言处理——文本分类

文本分类传统机器学习方法文本表示向量空间模型特征选择文档频率互信息信息增益（IG） 分类器设计贝叶斯理论：线性判别函数文本分类性能评估P-R曲线ROC曲线将文本文档或句子分类为预定义的类或类别， 有单标签多类别文本分类和多…...

编程新知 2026/1/6 21:51:29

原文链接

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