~ 3 мин

Отправка заявок на email в Next.js

859

12/22/2023

Самый простой способ отправки уведомлений о происходящих изменениях на вашем сайте это отправка электронных писем для уведомлений, подтверждений или связи с пользователями. В этой статье мы рассмотрим, как реализовать отправку заявок на Email в приложении на основе Next.js, используя библиотеку Nodemailer.

Вадим Пашаев

Инженер, веб-разработчик, путешественник

Перейти в профиль

Шаг 1: Установка зависимостей

Первым делом, в уже установленное, с помощью create-next-app, Next.js приложение установим пакет nodemailer. Nodemailer - это модуль для приложений Node.js, который обеспечивает легкую отправку электронной почты. Проект был запущен в 2010 году, когда не существовало разумных вариантов отправки электронных сообщений. Сегодня это основное решение, к которому обращаются большинство пользователей Node.js по умолчанию. Откройте терминал и выполните следующую команду:

npm i nodemailer

Шаг 2: Настройка Nodemailer

Создайте файл .env в корневой директории вашего проекта на Next.js и добавьте следующие переменные:

HOTMAIL_USER=[укажите здесь ваш email] // например, no-reply@pxstudio.pw
HOTMAIL_PASS=[здесь укажите пароль от учетной записи] // Hotmail например
HOTMAIL_FROM=[здесь укажите адрес отправителя] // Например: PXSTUDIO Bot <no-reply@pxstudio.pw>, можно указать вместе с именем
HOTMAIL_TO=[конечный email, куда вы хотите получать уведомления] // Например свой личный email

Шаг 3: Написание функции отправки Email

Это возможно благодаря тому, что в Next.js есть специальный функционал API Routes. Представляет собой специальный тип файлов, которые используются для создания серверной логики и обработки API-запросов в вашем приложении Next.js. Эти файлы размещаются в специальной директории pages/api в корне вашего проекта.

Создайте файл pages/api/send-email.js и добавьте следующий код. Код для понимания сильно упрощен. Можно добавить множество специальных проверок:

import nodemailer from "nodemailer"
import fetch from "isomorphic-unfetch"

async function sendMail(data) {
  const email = data?.email
  const name = data?.name
  const phone = data?.phone
  const message = data?.message
  const link = data?.link

  const formattedBody = `
    <html>
      <body>
        <p>${message}</p>
        <p>---</p>
        <p>${name}</p>
        <p>${email}</p>
        <p>${phone}</p>
        <p>---</p>
        <p>${link}</p>
      </body>
    </html>
  `

  const transporter = nodemailer.createTransport({
    service: "hotmail", // С помощью этой настройки можно менять тип почты, например gmail
    auth: {
      user: process.env.HOTMAIL_USER,
      pass: process.env.HOTMAIL_PASS,
    },
  })

  return await transporter.sendMail({
    from: process.env.HOTMAIL_FROM,
    to: process.env.HOTMAIL_TO,
    subject: "Заявка с сайта",
    html: formattedBody,
  })
}

export default async function lead(req, res) {
  if (req.method !== "POST") {
    return res.status(200).json({ message: "Разрешены только POST-запросы" })
  }

  const r2 = await sendMail({ ...req.body })
  if (r2?.messageId) {
    res.json({ ok: true })
  } else {
    res.json({ ok: false, message: "Сообщение не отправлено" })
  }
}

Шаг 4: Интеграция во фронтенд Next.js

Для этого к событию onSubmit формы, где вы собираете данные, нужно привязать обработчик:

  function handleSubmit(e) {
    e.preventDefault()

    if (email === "" || name === "" || phone === "") {
      return null
    }

    fetch(`/api/send-mail`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        email,
        name,
        phone,
        message,
        link
      })
    })
      .then(r => r.json())
      .then(d => {
        if (d?.ok) {
          setIsSended(true)
        }
      })
      .catch(e => console.log(e.message))
  }

Заключение

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

Эта реализация предоставляет отправку Email на базовом уровне. При необходимости вы можете дополнить код для лучшего управления ошибками, шаблонами писем и другими дополнительными функциональностями.

Создание проекта на Strapi

Лучшие практики SEO в Headless CMS на примере Strapi

Что такое Next.js и для чего он нужен?

Взгляните на наш стартап:

Выбирай экскурсии и активности по всему миру

Уже зарегистрировано 0 стран, 0 направлений, 0 экскурсий

Есть интересная идея?

И вы очень хотите ее реализовать, пишите нам и получите подробное коммерческое предложение и быструю реализацию

Отправить запрос