Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

So erstellen Sie ein dynamisches E-Mail-Kontaktformular in Next.js mit Resend und Zod

PHPz
Freigeben： 2024-08-10 18:43:32
Original
347 Leute haben es durchsucht

Einführung

Next.js ist ein leistungsstarkes Full-Stack-Framework, das es uns ermöglicht, Anwendungen mit Frontend- und Backend-Funktionen zu erstellen. Es ist sehr flexibel und kann für alles verwendet werden, von einfachen statischen Websites bis hin zu komplexen Web-Apps. Heute werden wir Next.js verwenden, um ein E-Mail-Kontaktformular zu erstellen.

Formulare sind ein wichtiger Bestandteil jeder Website und ermöglichen Benutzern die Interaktion mit der Anwendung. Ob es um die Anmeldung, das Einloggen, das Geben von Feedback oder das Sammeln von Daten geht, Formulare sind für das Benutzererlebnis von entscheidender Bedeutung. Ohne Formulare wäre eine Full-Stack-Anwendung nicht in der Lage, Benutzereingaben ordnungsgemäß zu sammeln und zu verarbeiten.

In diesem Blog zeige ich Ihnen, wie Sie mit Next.js, Resend und Zod (zur Formularvalidierung) ein E-Mail-Kontaktformular erstellen. Wir behandeln die Einrichtung des Projekts, den Entwurf des Formulars, die Bearbeitung von Formularübermittlungen und die Erstellung einer separaten API-Route. Am Ende wissen Sie, wie Sie Formulare erstellen und zu Ihren Next.js-Apps hinzufügen, um sicherzustellen, dass Ihre Web-App gut funktioniert und einfach zu verwenden ist.

Also, ohne weitere Verzögerung, fangen wir an.

Was ist erneut senden?

Resend ist eine moderne E-Mail-API für Entwickler. Es wurde entwickelt, um das Versenden von E-Mails aus Ihren Anwendungen einfach, zuverlässig und skalierbar zu machen. Im Gegensatz zu herkömmlichen E-Mail-Diensten wurde Resend speziell für Entwickler entwickelt und bietet eine unkomplizierte API, die sich nahtlos in verschiedene Programmiersprachen und Frameworks, einschließlich Next.js, integrieren lässt.

In unserem Next.js-Formularprojekt verwenden wir Resend zum Senden von E-Mails. Wenn ein Benutzer das Formular absendet, verwenden wir die API von Resend, um eine Bestätigungs-E-Mail zu senden oder die Formulardaten nach Bedarf zu verarbeiten.

Was ist Zod?

Zod ist ein leistungsstarkes Tool für Ihre Daten. Es handelt sich um eine TypeScript-First-Bibliothek, die Ihnen hilft, die Form Ihrer Daten zu definieren und zu überprüfen. Stellen Sie sich das so vor, als würden Sie Regeln für Ihre Daten festlegen und dann sicherstellen, dass die Daten diesen Regeln entsprechen, bevor Sie sie verwenden.

How to Create Dynamic Email Contact Form in Next.js Using Resend and Zod

Wenn Sie TypeScript verwenden (und wenn nicht, sollten Sie darüber nachdenken!), spielt Zod gut damit. Es kann automatisch TypeScript-Typen aus Ihren Schemata ableiten, was eine enorme Zeitersparnis bedeutet. Während TypeScript Typen zur Kompilierzeit prüft, erledigt Zod dies zur Laufzeit. Dies bedeutet, dass Sie Datenprobleme erkennen können, die möglicherweise durch die statische Typprüfung durchgehen. Sie können Zod für alle Arten von Datenvalidierungsszenarien verwenden, von einfachen Formulareingaben bis hin zu komplexen API-Antworten.

Projekt-Setup

Beginnen wir mit der Einrichtung unseres Next.js-Projekts mit allen notwendigen Abhängigkeiten. Wir verwenden TypeScript für die Typsicherheit, Tailwind CSS für das Styling, Ant Design für UI-Komponenten, Zod für die Formularvalidierung und Resend für die E-Mail-Funktionalität.

  • Erstellen Sie ein neues Next.js-Projekt mit TypeScript: 
npx create-next-app@latest my-contact-form --typescript
cd my-contact-form
Nach dem Login kopieren
  • Zusätzliche Abhängigkeiten installieren: 
yarn add antd zod resend react-icons
Nach dem Login kopieren

Umgebungsvariablen einrichten

Zum Senden einer E-Mail verwenden wir Resend, daher benötigen wir den Resend-API-Schlüssel. Bevor wir unseren Server starten, gehen wir zu „Erneut senden“ und holen uns unsere API-Schlüssel. Klicken Sie hier, um zur Seite „Erneut senden“ zu gelangen, und klicken Sie auf die Schaltfläche „Anmelden“.

How to Create Dynamic Email Contact Form in Next.js Using Resend and Zod

Nach der Anmeldung werden Sie auf diese Seite weitergeleitet. Hier sehen Sie alle E-Mails, die Sie über Ihr Formular erhalten haben.

How to Create Dynamic Email Contact Form in Next.js Using Resend and Zod

Klicken Sie hier auf den Abschnitt API-Schlüssel

How to Create Dynamic Email Contact Form in Next.js Using Resend and Zod

Und einen API-Schlüssel generieren, indem Sie darauf klicken? Schaltfläche

How to Create Dynamic Email Contact Form in Next.js Using Resend and Zod

Kopieren Sie nun diesen API-Schlüssel und bewahren Sie ihn sicher auf. Öffnen Sie als Nächstes VSCode und erstellen Sie eine neue Datei mit dem Namen .env in Ihrem Stammordner. Fügen Sie dort eine Umgebungsvariable hinzu.

RESEND_API_KEY=yourapikeywillbehere
Nach dem Login kopieren

Jetzt können Sie Ihren Server auch mit diesem Befehl ausführen.

yarn dev
Nach dem Login kopieren
Nach dem Login kopieren

E-Mail-Vorlagenkomponente

Beginnen wir mit der Erstellung einer E-Mail-Vorlage. Dies ist die Vorlage, die Sie erhalten, wenn Ihnen jemand über das Kontaktformular eine E-Mail sendet.

import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
  message: string;
}

export const EmailTemplate: React.FC<EmailTemplateProps> = ({
  firstName,
  message,
}) => (
  <div>
    <h1>Hello, I am {firstName}!</h1>
    <p>You have received a new message from your Portfolio:</p>
    <p>{message}</p>
  </div>
);
Nach dem Login kopieren

Diese einfache React-Komponente definiert die Struktur der E-Mail, die gesendet wird, wenn jemand das Kontaktformular absendet. Es sind zwei Requisiten erforderlich: Vorname und Nachricht. Die Komponente erstellt eine personalisierte Begrüßung mit dem Vornamen und zeigt die übermittelte Nachricht an.

Implementieren des E-Mail-Versands mit der Resend-API

Hier. Wir werden sehen, wie die E-Mail-Versandfunktion mithilfe der Resend-API implementiert wird.

The Code Structure

First, let's look at where this code lives in our Next.js project:

app/
  ├── api/
  │   └── v1/
  │       └── send/
  │           └── route.ts
Nach dem Login kopieren

This structure follows Next.js 13's App Router convention, where API routes are defined as route handlers within the app directory.

This is our complete API route code ?

import { EmailTemplate } from 'app/components/email-template';
import { NextResponse } from 'next/server';
import { Resend } from 'resend';
import { v4 as uuid } from 'uuid';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: Request) {
  try {
    const { name, email, subject, message } = await req.json();

    const { data, error } = await resend.emails.send({
      from: 'Contact Form <onboarding@resend.dev>',
      to: 'katare27451@gmail.com',
      subject: subject || 'New Contact Form Submission',
      reply_to: email,
      headers: {
        'X-Entity-Ref-ID': uuid(),
      },
      react: EmailTemplate({ firstName: name, message }) as React.ReactElement,
    });

    if (error) {
      return NextResponse.json({ error }, { status: 500 });
    }

    return NextResponse.json({ data, message: 'success' }, { status: 200 });
  } catch (error) {
    console.error('Error processing request:', error);
    return NextResponse.json({ error: 'Failed to process request' }, { status: 500 });
  }
}
Nach dem Login kopieren

Breaking Down the Code

Now, let's examine each part of the code:

import { EmailTemplate } from 'app/components/email-template';
import { NextResponse } from 'next/server';
import { Resend } from 'resend';
import { v4 as uuid } from 'uuid';
Nach dem Login kopieren

These import statements bring in the necessary dependencies:

  • EmailTemplate: A custom React component for our email content(That we already built above.
  • NextResponse: Next.js utility for creating API responses.
  • Resend: The Resend API client.
  • uuid: For generating unique identifiers. 
const resend = new Resend(process.env.RESEND_API_KEY);
Nach dem Login kopieren

Here, we initialize the Resend client with our API key. It's crucial to keep this key secret, so we store it in an environment variable.

export async function POST(req: Request) {
  // ... (code inside this function)
}
Nach dem Login kopieren

This exports an async function named POST, which Next.js will automatically use to handle POST requests to this route.

const { name, email, subject, message } = await req.json();
Nach dem Login kopieren

We extract the form data from the request body. This assumes the client is sending a JSON payload with these fields.

const { data, error } = await resend.emails.send({
  from: 'Contact Form <onboarding@resend.dev>',
  to: 'katare27451@gmail.com',
  subject: subject || 'New Contact Form Submission',
  reply_to: email,
  headers: {
    'X-Entity-Ref-ID': uuid(),
  },
  react: EmailTemplate({ firstName: name, message }) as React.ReactElement,
});
Nach dem Login kopieren

This is where we'll get our emails! We use Resend's send method to dispatch the email:

  • from: The sender's email address.
  • to: The recipient's email address.
  • subject: The email subject, using the provided subject or a default.
  • reply_to: Sets the reply-to address to the form submitter's email.
  • headers: Includes a unique ID for tracking.
  • react: Uses our custom EmailTemplate component to generate the email content. 
if (error) {
  return NextResponse.json({ error }, { status: 500 });
}

return NextResponse.json({ data, message: 'success' }, { status: 200 });
Nach dem Login kopieren

Here, we handle the response from Resend. If there's an error, we return a 500 status with the error details. Otherwise, we send a success response.

catch (error) {
  console.error('Error processing request:', error);
  return NextResponse.json({ error: 'Failed to process request' }, { status: 500 });
}
Nach dem Login kopieren

This catch block handles any unexpected errors, logs them, and returns a generic error response.

And that's it! We've set up our API route. The only thing left is to set up our logic and UI. Let's do that too ?

Contact Page Component

In your app directory, create a new folder named contact-form and inside this folder, create a file named page.tsx.

app/
  ├── contact-form/
  │   └── page.tsx
Nach dem Login kopieren

Imports and Dependencies

First, import all necessary components from Ant Design, Next.js, and React Icons. We also import Zod for form validation.

import React from 'react';
import { Form, Input, Button, message, Space, Divider, Typography } from 'antd';
import Head from 'next/head';
import { FaUser } from 'react-icons/fa';
import { MdMail } from 'react-icons/md';
import { FaMessage } from 'react-icons/fa6';
import { z } from 'zod';
import Paragraph from 'antd/es/typography/Paragraph';
Nach dem Login kopieren

UI Layout and Design

Now, let's create our UI, and then we'll move on to the logic. Our form will look something like this.?

How to Create Dynamic Email Contact Form in Next.js Using Resend and Zod

In your page.tsx, after all the import statements, define a component and add a return statement first.

const ContactPage: React.FC = () => {
  return (
      <div className="max-w-3xl w-full space-y-8 bg-white p-10 rounded-xl shadow-2xl">
       /* our code will be here */
      </div>
  );
};

export default ContactPage;
Nach dem Login kopieren

Currently, we have just a simple div with a few tailwind styling now, we'll first add our heading part.

How to Create Dynamic Email Contact Form in Next.js Using Resend and Zod

...

        <div>
          <h2 className="mt-1 text-center text-3xl font-extrabold text-gray-900">Get in Touch</h2>
          <p className="mt-1 mb-4 text-center text-sm text-gray-600">
            I'd love to hear from you! Fill out the form below to get in touch.
          </p>
        </div>

...
Nach dem Login kopieren

Now, let's add our input fields

How to Create Dynamic Email Contact Form in Next.js Using Resend and Zod

 ...     
        <Form
          form={form}
          name="contact"
          onFinish={onFinish}
          layout="vertical"
          className="mt-8 space-y-6"
        >
          <Form.Item
            name="name"
            rules={[{ required: true, message: 'Please input your name!' }]}
          >
            <Input prefix={<FaUser className="site-form-item-icon" />} placeholder="Your Name" size="large" />
          </Form.Item>
          <Form.Item
            name="email"
            rules={[
              { required: true, message: 'Please input your email!' },
              { type: 'email', message: 'Please enter a valid email!' }
            ]}
          >
            <Input prefix={<MdMail className="site-form-item-icon" />} placeholder="Your Email" size="large" />
          </Form.Item>
          <Form.Item
            name="subject"
            rules={[{ required: true, message: 'Please input a subject!' }]}
          >
            <Input prefix={<FaMessage className="site-form-item-icon" />} placeholder="Subject" size="large" />
          </Form.Item>
          <Form.Item
            name="message"
            rules={[{ required: true, message: 'Please input your message!' }]}
          >
            <TextArea
              placeholder="Your Message"
              autoSize={{ minRows: 4, maxRows: 8 }}
            />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              disabled={isSubmitting}
            >
              {isSubmitting ? 'Sending...' : 'Send Message'}
            </Button>
          </Form.Item>
        </Form>
...
Nach dem Login kopieren

Here, in the above code firstly we added a Form Component. This is the main Form component from Ant Design. It has the following props:

<Form
  form={form}
  name="contact"
  onFinish={onFinish}
  layout="vertical"
  className="mt-8 space-y-6"
>
  {/* Form items */}
</Form>
Nach dem Login kopieren
  • form: Links the form to the form object created using Form.useForm().
  • name: Gives the form a name, in this case, "contact".
  • onFinish(we'll declare this function in our next section): Specifies the function to be called when the form is submitted successfully.
  • layout: Sets the form layout to "vertical".
  • className: Applies CSS classes for styling.

Then, we added a Form Items. Each Form.Item represents a field in the form. Let's look at the "name" field as an example.

<Form.Item
  name="name"
  rules={[{ required: true, message: 'Please input your name!' }]}
>
  <Input prefix={<FaUser className="site-form-item-icon" />} placeholder="Your Name" size="large" />
</Form.Item>
Nach dem Login kopieren
  • name: Specifies the field name.
  • rules: An array of validation rules. Here, it's set as required.
  • The Input component is used for text input, with a user icon prefix and a placeholder.

Similarly, we have Email and other fields.

<Form.Item
  name="email"
  rules={[
    { required: true, message: 'Please input your email!' },
    { type: 'email', message: 'Please enter a valid email!' }
  ]}
>
  <Input prefix={<MdMail className="site-form-item-icon" />} placeholder="Your Email" size="large" />
</Form.Item>
Nach dem Login kopieren

This field has an additional rule to ensure the input is a valid email address.

Subject and Message Fields: These are similar to the name field, with the message field using a TextArea component for multi-line input.

Then, we have a Submit Button to submit our form

<Form.Item>
  <Button
    type="primary"
    htmlType="submit"
    className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
    disabled={isSubmitting}
  >
    {isSubmitting ? 'Sending...' : 'Send Message'}
  </Button>
</Form.Item>
Nach dem Login kopieren

This is the submit button for the form. It's disabled when isSubmitting (we'll add this state in our next section) is true, and its text changes to "Sending..." during submission.

Form Submission Logic

So, in the logic part, we have a few things to do:

  • Setting up Zod schema for form validation
  • Adding new states
  • and, implementing a onFinish function

We'll start with setting up our schema first.

// Zod schema for form validation
const contactSchema = z.object({
  name: z.string().min(4, 'Name must be at least 4 characters').max(50, 'Name must not exceed 50 characters'),
  email: z.string().email('Invalid email address').regex(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/, "Email must be a valid format"),
  subject: z.string().min(5, 'Subject must be at least 5 characters').max(100, 'Subject must not exceed 100 characters'),
  message: z.string().min(20, 'Message must be at least 20 characters').max(1000, 'Message must not exceed 1000 characters'),
});

type ContactFormData = z.infer<typeof contactSchema>;
Nach dem Login kopieren

This part defines a Zod schema for form validation. As we already learned, Zod is a TypeScript-first schema declaration and validation library. The contactSchema object defines the structure and validation rules for the contact form:

  • name: Must be a string between 4 and 50 characters.
  • email: Must be a valid email address and match the specified regex pattern.
  • subject: Must be a string between 5 and 100 characters.
  • message: Must be a string between 20 and 1000 characters.

The ContactFormData type is inferred from the Zod schema, providing type safety for the form data.

Now, let's add 2 new states and implement our onFinish function.

const ContactPage: React.FC = () => {
  const [form] = Form.useForm<ContactFormData>();
  const [isSubmitting, setIsSubmitting] = React.useState(false);

  const onFinish = async (values: ContactFormData) => {
    setIsSubmitting(true);
    try {
      contactSchema.parse(values);

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

      if (!response.ok) {
        message.error('Failed to send message. Please try again.');
        setIsSubmitting(false); 
      }

      const data = await response.json();

      if (data.message === 'success') {
        message.success('Message sent successfully!');
        setIsSubmitting(false);
        form.resetFields();
      } else {
        throw new Error('Failed to send message');
      }
    } catch (error) {
      if (error instanceof z.ZodError) {
        error.errors.forEach((err) => {
          message.error(err.message);
          setIsSubmitting(false);
        });
      } else {
        message.error('Failed to send message. Please try again.');
        setIsSubmitting(false);
      }
    } finally {
      setIsSubmitting(false);
    }
  };
Nach dem Login kopieren

This part defines the ContactPage functional component:

  • It uses the Form.useForm hook to create a form instance.
  • It manages a isSubmitting state to track form submission status.
  • The onFinish function is called when the form is submitted:
  1. It sets isSubmitting to true.
  2. It uses contactSchema.parse(values) to validate the form data against the Zod schema.
  3. If validation passes, it sends a POST request to /api/v1/send with the form data.
  4. It handles the response, showing success or error messages accordingly.
  5. If there's a Zod validation error, it displays the error message.
  6. Finally, it sets isSubmitting back to false.

This setup ensures that the form data is validated on both the client-side (using Antd's form validation) and the server-side (using Zod schema validation) before sending the data to the server. It also manages the submission state and provides user feedback through success or error messages.

And, this is the complete code of our contact-form file ?

"use client";

import React from 'react';
import { Form, Input, Button, message, Space, Divider, Typography } from 'antd';
import Head from 'next/head';
import { FaUser } from 'react-icons/fa';
import { MdMail } from 'react-icons/md';
import { FaMessage } from 'react-icons/fa6';
import { z } from 'zod';
import { Container } from 'app/components/container';
import Paragraph from 'antd/es/typography/Paragraph';

const { TextArea } = Input;
const { Text } = Typography;

// Zod schema for form validation
const contactSchema = z.object({
  name: z.string().min(4, 'Name must be at least 4 characters').max(50, 'Name must not exceed 50 characters'),
  email: z.string().email('Invalid email address').regex(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/, "Email must be a valid format"),
  subject: z.string().min(5, 'Subject must be at least 5 characters').max(100, 'Subject must not exceed 100 characters'),
  message: z.string().min(20, 'Message must be at least 20 characters').max(1000, 'Message must not exceed 1000 characters'),
});

type ContactFormData = z.infer<typeof contactSchema>;

const ContactPage: React.FC = () => {
  const [form] = Form.useForm<ContactFormData>();
  const [isSubmitting, setIsSubmitting] = React.useState(false);

  const onFinish = async (values: ContactFormData) => {
    setIsSubmitting(true);
    try {
      contactSchema.parse(values);

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

      if (!response.ok) {
        message.error('Failed to send message. Please try again.');
        setIsSubmitting(false); 
      }

      const data = await response.json();

      if (data.message === 'success') {
        message.success('Message sent successfully!');
        setIsSubmitting(false);
        form.resetFields();
      } else {
        throw new Error('Failed to send message');
      }
    } catch (error) {
      if (error instanceof z.ZodError) {
        error.errors.forEach((err) => {
          message.error(err.message);
          setIsSubmitting(false);
        });
      } else {
        message.error('Failed to send message. Please try again.');
        setIsSubmitting(false);
      }
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
      

        

          
Get in Touch

          

            I'd love to hear from you! Fill out the form below to get in touch.
          

        

        

          
            } placeholder="Your Name" size="large" />
          
          
            } placeholder="Your Email" size="large" />
          
          
            } placeholder="Subject" size="large" />