안녕하세요 친구 여러분, dev.to의 첫 번째 게시물입니다 :) 이 튜토리얼에서는 Next.js와 함께 API 경로를 사용하여 이메일을 보내는 서비스를 만드는 간단한 5단계를 알려드립니다.

SendGrid란?

API 통신을 통해 애플리케이션에 있는 모든 고객에게 이메일을 보낼 수 있는 매우 인기 있는 서비스입니다. UBER, Spotify, airbnb, yelp와 같은 대기업에서 사용한다는 점을 강조하고 싶습니다. 서비스에 대한 자세한 정보를 얻을 수 있습니다here.

Next.js란?

정적 및 동적 웹 사이트를 만들 수 있는 올인원 솔루션입니다. JAMStack에 관심이 있는 사람들을 위한 훌륭한 옵션입니다.

다음 앱 만들기

npx create-next-app next-sendgrid

스크립트 개체 추가

이 단계에서는 프로젝트에 필요한 구조에 전념할 것입니다.

종속성을 설치한 후 프로젝트는 다음과 같아야 합니다.



이제 모든 명령scripts 또는 npm를 포함하는 yarn 개체를 추가합니다.



마지막으로 폴더 /pages 를 만들어야 합니다. 폴더 안에 파일 index.js , registry.js 및 폴더 /api 를 만듭니다. / api 폴더 안에 경로send-email.js를 생성합니다.

3단계

프로그래밍에서는 일반적으로 많이 사용하는 함수를 재사용하는 것이 좋습니다. 이러한 이유로 프로젝트 루트에 다음 파일을 포함하는 /utils 폴더를 만듭니다.



sendEmail.js

import fetch from 'node-fetch'

const SENDGRID_API = 'https://api.sendgrid.com/v3/mail/send'

const sendEmail = async ({ name, email }) => {
    await fetch(SENDGRID_API, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${SENDGRID_API_KEY}`
        },
        body: JSON.stringify({
          personalizations: [
            {
              to: [
                {
                  email
                }
              ],
              subject: 'Demo success :)'
            }
          ],
          from: {
            email: '[email protected]',
            name: 'Test SendGrid'
          },
          content: [
            {
              type: 'text/html',
              value: `Congratulations <b>${name}</b>, you just sent an email with sendGrid`
            }
          ]
        })
    });
}

export { sendEmail };

이메일을 보내는 방식이 왜 이렇게 설계되었는지 알고 싶다면 더 많은 정보를 알 수 있습니다here.

/api/send-email.ts

API 경로는 Next.js를 사용하여 API를 구축하기 위한 간단한 솔루션을 제공합니다. 다른 유사한 솔루션을 표현하는 대신 이점이 무엇인지 궁금할 수 있습니다.

API 경로: 서버리스
익스프레스: 서버

서버리스에 중점을 둔 이점은 기능을 기반으로 API를 구축하여 오류율을 줄이는 것입니다. 필요할 때 호출됩니다. 전통적인 서버 접근 방식을 사용하면 아무도 API를 사용하지 않더라도 API가 온라인 상태가 될 수 있으므로 호스팅 공급자의 지불 비용이 증가합니다.

import { NextApiRequest, NextApiResponse  } from 'next';

import { sendEmail } from '../../utils/sendEmail';

export default async (req: NextApiRequest, res: NextApiResponse) => {
    if(req.method === 'POST') {
      const { name, email } = req.body;
      await sendEmail({ name, email });
      return res.status(200).end();
    }
    return res.status(404).json({
        error: {
            code: 'not_found',
            messgae: "The requested endpoint was not found or doesn't support this method."
        }
    });
}

4단계

이 단계에서는 API에서 sendGrid를 사용할 수 있도록 키를 만드는 데 중점을 둘 것입니다. 먼저 다음에서 계정을 만들어야 합니다page. 대시보드에 액세스한 후 다음 옵션으로 이동합니다.



옵션을 선택하면 다음이 표시됩니다.



API 키 생성을 완료하면 파일을 약간 수정합니다sendEmail.js.

import fetch from 'node-fetch'

const SENDGRID_API = 'https://api.sendgrid.com/v3/mail/send'
const SENDGRID_API_KEY = 'YOU_KEY'

const sendEmail = async ({ name, email }) => {...}

export { sendEmail };

5단계

이 마지막 단계에서 우리가 할 일은 그들이 이메일을 보낼 수 있도록 UI를 구현하는 것입니다. 디자인이 지나치게 단순합니다.
/pages/index.js

import React from 'react';

import Registry from './registry';

const Index = () => <Registry />;

export default Index;

/pages/registry.js

import React, { useState } from 'react';

const Registry = () => {
    const [state, setState] = useState({ name: '', email: '' });
    const handleChange = event => {
      const { name, value } = event.target;
      setState({
        ...state,
        [name]: value
      });
    }
    const handlePress = () => {
      fetch('/api/send-email', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: state.name, email: state.email })
      });
    }
    return (
        <>
      <div>
      <label>
        Name
        <input
          name="name"
          type="text"
          onChange={handleChange}
        />
      </label>
      </div>
      <label>
        Email
        <input
          name="email"
          type="email"
          onChange={handleChange}
        />
      </label>
      <div>
      <button onClick={handlePress}>Send</button>
      </div>
        </>
    );
}

export default Registry;

React로 많은 입력을 처리하는 방법이 궁금한 경우 이 자습서에서 사용하는 패턴을 자세히 설명하는 다음article을 권장합니다. 기본 주제로 돌아가서 모든 단계를 완료하면 다음 결과가 표시되어야 합니다.





프로젝트 리소스: https://github.com/MAPESO/nextjs-sendgrid