찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Resend 및 Zod를 사용하여 Next.js에서 동적 이메일 문의 양식을 만드는 방법

Resend 및 Zod를 사용하여 Next.js에서 동적 이메일 문의 양식을 만드는 방법

PHPz
PHPz원래의
2024-08-10 18:43:32379검색

소개

Next.js는 프런트엔드와 백엔드 기능을 모두 갖춘 애플리케이션을 구축할 수 있는 강력한 풀 스택 프레임워크입니다. 매우 유연하며 단순한 정적 웹 사이트부터 복잡한 웹 앱까지 모든 것에 사용할 수 있습니다. 오늘은 Next.js를 사용하여 이메일 문의 양식을 작성하겠습니다.

양식은 모든 웹사이트의 핵심 부분으로, 사용자가 애플리케이션과 상호 작용할 수 있도록 해줍니다. 가입, 로그인, 피드백 제공, 데이터 수집 등 양식은 사용자 경험에 매우 중요합니다. 양식이 없으면 전체 스택 애플리케이션이 사용자 입력을 제대로 수집하고 처리할 수 없습니다.

이 블로그에서는 Next.js, Resend 및 Zod(양식 유효성 검사용)를 사용하여 이메일 문의 양식을 만드는 방법을 보여 드리겠습니다. 프로젝트 설정, 양식 디자인, 양식 제출 처리 및 별도의 API 경로 생성에 대해 다룹니다. 마지막에는 Next.js 앱에 양식을 작성하고 추가하여 웹 앱이 제대로 작동하고 사용하기 쉬운지 확인하는 방법을 알게 될 것입니다.

그럼 더 이상 지체하지 말고 시작하겠습니다.

재전송이란 무엇입니까?

Resend는 개발자를 위한 최신 이메일 API입니다. 애플리케이션에서 이메일을 간단하고 안정적이며 확장 가능하게 보낼 수 있도록 설계되었습니다. 기존 이메일 서비스와 달리 Resend는 개발자를 염두에 두고 구축되었으며 Next.js를 비롯한 다양한 프로그래밍 언어 및 프레임워크와 원활하게 통합되는 간단한 API를 제공합니다.

Next.js 양식 프로젝트에서는 Resend를 사용하여 이메일을 보냅니다. 사용자가 양식을 제출하면 Resend의 API를 사용하여 확인 이메일을 보내거나 필요에 따라 양식 데이터를 처리합니다.

조드(Zod)란 무엇인가?

Zod는 데이터를 위한 강력한 도구입니다. 데이터의 형태를 정의하고 확인하는 데 도움이 되는 TypeScript 우선 라이브러리입니다. 데이터에 대한 규칙을 설정한 다음 사용하기 전에 데이터가 해당 규칙과 일치하는지 확인하는 것으로 생각하세요.

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

TypeScript를 사용하고 있다면(그렇지 않다면 고려해 보세요!) Zod는 TypeScript를 잘 사용합니다. 스키마에서 TypeScript 유형을 자동으로 추론할 수 있으므로 시간이 크게 절약됩니다. TypeScript가 컴파일 타임에 유형을 확인하는 반면 Zod는 런타임에 이를 수행합니다. 이는 정적 유형 검사를 통해 빠져나갈 수 있는 데이터 문제를 포착할 수 있음을 의미합니다. 간단한 양식 입력부터 복잡한 API 응답까지 모든 종류의 데이터 검증 시나리오에 Zod를 사용할 수 있습니다.

프로젝트 설정

필요한 모든 종속성을 포함하여 Next.js 프로젝트를 설정하는 것부터 시작하겠습니다. 유형 안전성을 위해 TypeScript를, 스타일 지정을 위해 Tailwind CSS를, UI 구성요소를 위해 Ant Design을, 양식 검증을 위해 Zod를, 이메일 기능을 위해 Resend를 사용할 것입니다.

  • TypeScript를 사용하여 새 Next.js 프로젝트를 만듭니다. 
npx create-next-app@latest my-contact-form --typescript
cd my-contact-form
  • 추가 종속성을 설치합니다. 
yarn add antd zod resend react-icons

환경 변수 설정

이메일을 보내려면 Resend를 사용하므로 Resend API 키가 필요합니다. 서버를 시작하기 전에 재전송으로 이동하여 API 키를 받으세요. 여기를 클릭하시면 재전송 사이트로 이동 후 로그인 버튼을 눌러주세요.

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

로그인하면 이 페이지로 리디렉션됩니다. 여기에는 양식에서 받은 모든 이메일이 표시됩니다.

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

여기에서 API 키 섹션을 클릭하세요

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

그리고 이것을 클릭하여 API 키를 생성하시겠습니까? 버튼

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

이제 해당 API 키를 복사하여 안전하게 보관하세요. 다음으로 VSCode를 열고 루트 폴더에 .env라는 새 파일을 만듭니다. 거기에 환경 변수를 추가하세요.

RESEND_API_KEY=yourapikeywillbehere

이제 이 명령을 사용하여 서버를 실행할 수도 있습니다.

yarn dev

이메일 템플릿 구성요소

이메일 템플릿을 만드는 것부터 시작해 보겠습니다. 이는 누군가가 문의 양식을 통해 이메일을 보낼 때 받게 되는 템플릿입니다.

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>
);

이 간단한 React 구성 요소는 누군가가 문의 양식을 제출할 때 전송될 이메일의 구조를 정의합니다. firstName과 message라는 두 가지 소품이 필요합니다. 구성요소는 이름을 사용하여 개인화된 인사말을 생성하고 제출된 메시지를 표시합니다.

Resend API를 사용하여 이메일 전송 구현

여기요. Resend API를 사용하여 이메일 전송 기능을 구현하는 방법을 살펴보겠습니다.

The Code Structure

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

app/
  ├── api/
  │   └── v1/
  │       └── send/
  │           └── route.ts

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 });
  }
}

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';

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);

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)
}

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();

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,
});

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 });

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 });
}

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

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';

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;

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>

...

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>
...

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>
  • 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>
  • 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>

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>

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>;

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);
    }
  };

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" />