Nastavení emailového formuláře v Next.js

Nastavení emailového formuláře v Next.js pomocí Nodemailer

Emailové formuláře jsou základním prvkem mnoha webových aplikací, umožňující uživatelům posílat dotazy, žádosti nebo jiné informace přímo na váš email. V tomto článku si ukážeme, jak v prostředí Next.js nastavit emailový formulář pomocí knihovny Nodemailer. Tento průvodce je zaměřen na začátečníky, kteří chtějí rychle a efektivně vytvořit funkční řešení.

Proč používat Nodemailer pro odesílání emailů?

Nodemailer je populární knihovna pro odesílání emailů v Node.js (a tedy i v Next.js). Umožňuje snadné nastavení SMTP připojení a odesílání emailů pomocí jednoduchého API. Nodemailer podporuje různé autentizační metody a umožňuje posílat textové i HTML emaily, což z něj činí ideální volbu pro většinu webových aplikací.

Instalace Nodemailer

Než začneme s implementací formuláře, je potřeba nainstalovat knihovnu Nodemailer. To provedeme pomocí npm (Node Package Manager).

npm install nodemailer

Po úspěšné instalaci můžeme začít s nastavováním našeho emailového formuláře.

Nastavení emailového formuláře

Cílem je nastavit formulář na straně klienta i serveru. Použijeme prostředí Next.js, kde API route na serveru zpracuje požadavek z formuláře a odešle email pomocí Nodemailer.

Konfigurace .env souboru

Prvním krokem je konfigurace souboru .env, kde budeme uchovávat naše přihlašovací údaje a nastavení pro SMTP server. Toto nastavení zahrnuje uživatelské jméno, heslo a SMTP server, který budeme používat pro odesílání emailů.

# Konfigurace emailového formuláře pro kontakt
EMAIL_USER_CONTACT=odesilatel@webzi.cz
EMAIL_PASS_CONTACT=ZadejteHesloZde

# Nastavení SMTP serveru
SMTP_HOST=smtp.poskytovatel.cz
SMTP_PORT=465
SMTP_SECURE=true

# Hlavní emailová adresa pro příjem zpráv
EMAIL_TO=prijemce@webzi.cz

V tomto příkladu používáme email pro kontakt. Všechny zprávy budou doručovány na hlavní emailovou adresu prijemce@webzi.cz.

Implementace serverové části pomocí Nodemailer

V této části nastavíme serverovou část aplikace, která bude zpracovávat data z formuláře a odesílat emaily pomocí Nodemailer. Budeme pracovat s API route v Next.js.

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

export async function POST(request: Request) {
  try {
    console.log("API route hit - processing request");

    // Zpracování přijatých dat
    const { name, email, website, message } = await request.json();
    console.log("Přijatá data:", { name, email, website, message });

    // Nastavení Nodemailer
    const transporter = nodemailer.createTransport({
      host: process.env.SMTP_HOST,
      port: Number(process.env.SMTP_PORT),
      secure: process.env.SMTP_SECURE === 'true',
      auth: {
        user: process.env.EMAIL_USER_CONTACT,
        pass: process.env.EMAIL_PASS_CONTACT,
      },
      logger: true,
      debug: true,
    });

    // Odeslání emailu
    await transporter.sendMail({
      from: `"Webzi Kontakt" <${process.env.EMAIL_USER_CONTACT}>`,
      to: process.env.EMAIL_TO,
      subject: `Nová zpráva z kontaktního formuláře od ${name}`,
      text: `Zpráva z kontaktního formuláře.\n\nJméno: ${name}\nEmail: ${email}\nFirma: ${website}\nZpráva: ${message}`,
    });

    console.log("E-mail byl úspěšně odeslán");
    return NextResponse.json({ message: 'E-mail byl úspěšně odeslán' }, { status: 200 });

  } catch (error) {
    console.error('Chyba při odesílání e-mailu:', error);
    const errorMessage = error instanceof Error ? error.message : 'Neznámá chyba';
    return NextResponse.json({ message: 'Nepodařilo se odeslat zprávu', error: errorMessage }, { status: 500 });
  }
}

V tomto příkladu vidíme kompletní nastavení Nodemailer pro odesílání emailů. Používáme zde proměnné z .env souboru pro konfiguraci SMTP serveru a autentizaci. Zpráva je poté odeslána na emailovou adresu specifikovanou v proměnné EMAIL_TO.

Nastavení klientské části

Na klientské straně budeme mít jednoduchý formulář, který uživatel vyplní a odešle. Formulář bude odesílat data na API route, kterou jsme vytvořili v předchozím kroku.

import React, { useState } from 'react';

const CustomContactForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    website: '',
    message: '',
  });

  const [isLoading, setIsLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);

    try {
      const response = await fetch('/api/contactForm', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        alert('Formulář byl úspěšně odeslán!');
      } else {
        const result = await response.json();
        throw new Error(result.error || 'Nepodařilo se odeslat formulář.');
      }
    } catch (error) {
      setErrorMessage(error.message);
      alert(error.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Jméno" onChange={handleChange} />
      <input type="email" name="email" placeholder="Email" onChange={handleChange} />
      <input type="text" name="phone" placeholder="Telefon" onChange={handleChange} />
      <input type="text" name="website" placeholder="Web" onChange={handleChange} />
      <textarea name="message" placeholder="Zpráva" onChange={handleChange}></textarea>
      <button type="submit" disabled={isLoading}>{isLoading ? 'Odesílám...' : 'Odeslat'}</button>
      {errorMessage && <p>{errorMessage}</p>}
    </form>
  );
};

export default CustomContactForm;

Tento kód vytvoří jednoduchý formulář, který bude odesílat data na API route '/api/contactForm'. Po úspěšném odeslání formuláře se zobrazí potvrzovací zpráva. V případě chyby se zobrazí chybová zpráva.

Další kroky a optimalizace

Pokud chcete dále optimalizovat odesílání emailů z vašeho formuláře, můžete zvažovat implementaci funkcí jako je logování odeslaných emailů, přidání více příjemců na základě obsahu zprávy nebo integraci s dalšími službami jako je například Slack pro notifikace.