NodeJS 웹사이트에서 간단한 이메일 양식을 만드는 방법

14893 단어 programmingnextjsbeginnersjavascript
대부분의 웹 페이지에는 일반적으로 그다지 화려하지 않은 문의 양식이 있으며 그 뒤의 백엔드는 리드 생성 소프트웨어의 다른 변형인 SalesForce일 수 있지만 일반적으로 이메일만 보냅니다.

이메일을 보내는 것은 쉬운 일이 아닙니다. SMTP 서버가 있어야 하며 그것만으로도 비용이 추가됩니다. 다행히 우리는 모든 것이 서비스이자 API인 시대에 살고 있습니다. 귀하에게 이메일을 보낼 수 있는 수많은 서비스가 있습니다. 내 목표는 가능한 한 저렴하게(가급적 무료로) 하는 것이었습니다. 나는 하루에 기껏해야 약 5개의 이메일을 기대하고 있었다.

약간의 조사 끝에 Send In Blue을 사용하기로 결정했습니다. 무료 플랜에는 하루에 300개의 이메일이 있으며(저에게는 충분합니다) 가입하는 데 신용 카드가 필요하지 않으며 DNS 속임수가 없으며 API가 매우 간단합니다.

NextJS의 API 끝점



NextJS는 실제로 비밀 키를 브라우저에 노출하지 않고 외부 API를 호출할 수 있는 API 끝점을 만드는 친근하고 쉬운 방법을 제공합니다.

이 멋진help page의 도움으로 Send in Blue에서 API 키를 얻었고 내 .env.local 파일에 키를 추가했습니다.

NEXT_PUBLIC_SEND_IN_BLUE_KEY=xxxxapikeyxxxx


같은 이름의 Vercel 환경 변수 관리자에도 키를 넣었습니다.

Send In Blue API를 통해 이메일을 보낼 새 파일 api/email.js를 만들었습니다.

const sendInBlueKey = process.env.NEXT_PUBLIC_SEND_IN_BLUE_KEY

export default async function handler(req, res) {

    const body = req.body

    const resp = await fetch('https://api.sendinblue.com/v3/smtp/email', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'api-key': sendInBlueKey
        },
        body: JSON.stringify({
            "sender":{  
                "name": body.name,
                "email": body.email
             },
             "to":[  
                {  
                   "email": "[email protected]",
                   "name": "Pavel Polivka"
                }
             ],
             "subject":`Contact Form Eamil From ${body.name}`,
             "htmlContent":`
                <html>
                    <head></head>
                    <body>
                        From: ${body.name} <br/>
                        Message: ${body.message} <br/>
                    </body>
                </html>
            `
        })
    });

    res.status(200).end()
}


양식에서 보낸 사람의 이름과 이메일 및 메시지를 받고 있습니다. 내 이메일 클라이언트에 회신할 수 있도록 (발신자는 양식의 이메일입니다) 내 이메일 주소로 보내고 있습니다.

문의 양식



그런 다음 문의 양식 구성 요소를 만들었습니다. 세 개의 필드와 제출 버튼이 있는 간단한 양식입니다. 모든 전송 마법은 handleSubmit 함수에서 발생합니다.

import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import {useState} from 'react';

export default function Contact() {

    const [send, setSend] = useState(false);

    async function handleSubmit(event) {
        event.preventDefault()
        const data = {
            email: event.target.email.value,
            name: event.target.name.value,
            message: event.target.message.value,
        }

        const JSONdata = JSON.stringify(data)

        const endpoint = '/api/email'

        const options = {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSONdata,
        }

        const response = await fetch(endpoint, options)

        setSend(true)
    }

    let content;

    if (send) {
        content = <>
            <p>Thank you for contacting me!</p>
        </>
    } else {
        content = <>
            <form onSubmit={handleSubmit}>
                <TextField id="email" label="Email" variant="outlined" required />
                <TextField id="name" label="Name" variant="outlined" required />
                <TextField id="message" label="Message" variant="outlined" required multiline rows={4} />

                <Button variant="contained" type="submit">Send</Button>
            </form>
        </>
    }

    return (
        <>
            {content}
        </>
        );
}


저는 React Material UI를 사용하고 있지만 아무 UI나 일반 입력을 사용할 수 있습니다.

이것이 필요한 전부입니다. 간단하고 우아합니다. 한 시간 만에 이루어졌습니다.

행운을 빌어 요 코딩.
분산형 소셜 네트워크, 하위 그래프, IPFS - 다각형 4주차
기본 Bash 스크립팅

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage