РАЗРАБОТКА

Как подключить Nodemailer к проекту на Next.js и получать письма

Подключите Nodemailer к своему проекту на Next.js и начните получать письма из контактной формы.

✍️ Редакция iTech News | 05.03.2026 | ⏱ 2 мин | 👁 1 | Источник: DEV Community

⚡

Разработчики столкнутся с проблемой: контактные формы на сайтах часто не работают, если не настроить отправку уведомлений. Настройка Nodemailer для проекта на Next.js позволяет отправлять письма напрямую из приложения, что критически важно для получения обратной связи от пользователей.

Проблема с формами и её решение

Когда пользователь отправляет сообщение через контактную форму, часто никаких действий не происходит — ни уведомления о успехе, ни самого письма. Настройка Nodemailer и создание API в Next.js помогает решить эту проблему и грамотно обрабатывать ошибки.

Что потребуется для настройки

Для начала работы понадобятся:

Базовые знания React и Next.js;
Установленный Node.js;
Аккаунт Gmail или другой SMTP-провайдер.

Создать проект можно с помощью команды npx create-next-app@latest, после чего нужно установить Nodemailer и React-icons с помощью команд:

npm install nodemailer
npm install react-icons --save

Создание API для отправки писем

Для безопасности письма отправляются через серверный API, а не напрямую с клиента. Создайте файл app/api/contact/route.js и добавьте туда логику с использованием Nodemailer:

import nodemailer from "nodemailer";
import { NextResponse } from "next/server";

export async function POST(request) {
 try {
 const { name, email, message } = await request.json();
 if (!name || !email || !message) {
 return NextResponse.json({ message: "Все поля обязательны для заполнения" }, { status: 400 });
 }
 const transporter = nodemailer.createTransport({
 host: "smtp.gmail.com",
 port: 587,
 secure: false,
 auth: {
 user: process.env.GMAIL_USERNAME,
 pass: process.env.GMAIL_PASSWORD,
 },
 });
 await transporter.sendMail({
 from: process.env.GMAIL_USERNAME,
 to: process.env.GMAIL_TO,
 subject: `Новое сообщение от ${name}`,
 text: message,
 replyTo: email,
 });
 return Response.json({ message: "Письмо успешно отправлено" }, { status: 200 });
 } catch (error) {
 console.error(error);
 return Response.json({ message: "Не удалось отправить письмо" }, { status: 500 });
 }
}

Этот код обрабатывает эти формы, проверяет их и отправляет email пользователю.

Что делать дальше?

Настройка переменных окружения в файле .env.local поможет избежать утечки данных. Убедитесь, что у вас включена двухфакторная аутентификация на аккаунте Gmail и используйте приложение для создания паролей. После этого ваша контактная форма будет готова к работе!