Next를 사용하여 뉴스레터 구독 양식을 작성합니다.js API 라우팅 및 Twitter Revue API

29276 단어 newsletterreactjavascriptnextjs
전자메일을 수집하고 신뢰할 만한 통신 목록을 관리하는 것은 지역 사회를 육성하고 개인 브랜드를 발전시키는 가장 좋은 방법 중 하나이다.
본문에서, 나는 당신에게Next를 사용하여 시사통신 등록표를 만드는 것이 얼마나 쉬운지 보여 드리겠습니다.js API 라우팅, React 갈고리 및 Revue API

Revue란 무엇입니까?


Revue는 저자가 무료와 유료 시사통신을 쉽게 보낼 수 있는 시사통신 플랫폼이다.
리뷰는 애초 네덜란드 스타트업이 만든 서비스였으나 2021년 1월 트위터에 인수됐다.
최근 트위터는 창작자들이 개인 정보 페이지에 리뷰 시사통신을 끼워 넣고 방문자들이 쉽게 발견하고 구독할 수 있도록 하며 더 많은 인터넷 개발자들이 리뷰를 시사통신 서비스로 선택하도록 했다고 발표했다.
Revue 계정이 생성되지 않았습니까?당신을 만듭니다newsletter here!

Revue 시사통신 API


Revue를 뉴스 커뮤니케이션 서비스로 사용하는 이점 중 하나는 사용하기 쉬운 API입니다.
API 호출을 위해 Revue를 사용하려면 개요 파일의 통합 탭으로 이동하여 페이지 하단의 API 키를 수집하고 다음 페이지의 환경 변수에 저장합니다.js 프로젝트.

API 키를 가져와 환경 변수에 저장

⚠️ NOTE: Revue just recently changed how their API works. Before you can start to consume the API, you have to verify your account. Contact Revue support for more instructions.


다음 구독을 만듭니다.js API 라우팅


누군가가 시사 통신에 구독할 수 있도록 사용자의 이메일을 트위터 Revue API에 전달하는 함수를 만들어야 합니다.
어셈블리에서 Revue API를 직접 사용하여 추상적인 API를 생성하고 다음 API를 사용할 수 있습니다.js API 라우팅은 더 큰 유연성과 관심 분야 분리를 허용합니다.또한 Revue 뉴스레터 서비스를 더 이상 사용하지 않기로 결정한 경우 업데이트해야 할 유일한 코드는 Revue API와 상호 작용하는 API 라우팅입니다.
익숙하지 않은 경우 다음 단계에서 API 라우트를 사용합니다.js는 서버 없는 함수로 자신의 API 단점을 구축하는 해결 방안을 제공합니다.
다음 페이지의 pages/api 목록 아래에 있습니다.js 프로젝트, subscribe.ts 라는 새 파일을 만들고 기본 handler 함수를 내보냅니다.
import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {

}

📣 I’m using TypeScript for this tutorial, but the logic remains mostly the same if your project is in JavaScript.


다음에 이 함수가 req 대상에서 전자메일을 전달했다고 가정하십시오.req 객체에서 전자 메일 주소를 재구성하고 해당 전자 메일이 있는지 확인합니다.
export default function handler(req: NextApiRequest, res: NextApiResponse) {
    const { email } = req.body;

    if (!email) {
      return res.status(400).json({ error: 'Email is required' });
    }

}
함수에 이메일이 전달되면 승인 헤더의 일부로 Revue newsletter API에 API 요청을 보내고 이메일 주소를 API 토큰과 함께 전달합니다.
export default function handler(req: NextApiRequest, res: NextApiResponse) {
    const { email } = req.body;

    if (!email) {
      return res.status(400).json({ error: 'Email is required' });
    }

  const result = await fetch('https://www.getrevue.co/api/v2/subscribers', {
    method: 'POST',
    headers: {
      Authorization: `Token ${process.env.REVUE_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ email, double_opt_in: false })
  });

}

📣 I’ve passed an additional property to the request called double_opt_in and set it to false, informing Revue to add the subscriber to the list without having to confirm their email.


마지막으로 201의 상태를 호출자에게 되돌려주기 전에 결과를 분석하고 오류가 없는지 확인하십시오.최종 형식의 함수는 다음과 같습니다.
import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    const { email } = req.body;

    if (!email) {
      return res.status(400).json({ error: 'Email is required' });
    }

  const result = await fetch('https://www.getrevue.co/api/v2/subscribers', {
    method: 'POST',
    headers: {
      Authorization: `Token ${process.env.REVUE_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ email, double_opt_in: false })
  });

    const data = await result.json();

  if (!result.ok) {
    return res.status(500).json({ error: data.error.email[0] });
  }

  return res.status(201).json({ error: '' });

}

Typescript를 사용하여 양식 유형 만들기


TypeScript를 사용하여 가입 양식에 상태 또는 패턴을 적용할 수 있습니다.Form라는 새 열거를 만들고 다음 상태를 추가합니다.
export enum Form {
  Initial,
  Loading,
  Success,
  Error
}
그런 다음 양식의 새 유형을 만들고 새로 작성한 열거를 사용합니다.
export type FormState = {
  state: Form;
};

구독자를 위한 React 갈고리 만들기


API 라우팅이 완료되면 프로젝트에 이름useSubscribeToNewsletter.ts의 갈고리를 생성합니다.비록 우리는 폼 구독 논리를 구성 요소 자체에 놓을 수 있지만, 추상적으로 만들어서 전체 프로젝트에서 다시 사용할 수 있고 구성 요소 자체를 간소화할 수 있다.
우선, 구독 폼의 값을 저장할 상태 필름을 만들고, 폼에 대한 인용을 만듭니다.표는 네 가지 모델 중 하나일 수 있다. Initial, Loading, Success와 Error.
import { useRef, useState } from 'react';

export function useSubscribeToNewsletter() {
    const [form, setForm] = useState<FormState>({ state: Form.Initial });
    const inputEl = useRef(null);

}
다음에 갈고리에 subscribe 함수를 만들고 방금 만든 API 루트를 호출합니다.
async function subscribe(e) {
  e.preventDefault();
  setForm({ state: Form.Loading });

  const res = await fetch(`/api/subscribe`, {
    body: JSON.stringify({
      email: inputEl.current.value
    }),
    headers: {
      'Content-Type': 'application/json'
    },
    method: 'POST'
    });

}
요청이 완료되면 오류가 있는지 확인하십시오. 그렇지 않으면 form의 값을 Form.Success로 설정하고 폼의 내용을 지웁니다.
async function subscribe(e) {
  e.preventDefault();
  setForm({ state: Form.Loading });

  const res = await fetch(`/api/subscribe`, {
    body: JSON.stringify({
      email: inputEl.current.value
    }),
    headers: {
      'Content-Type': 'application/json'
    },
    method: 'POST'
    });

    const { error } = await res.json();

    if (error) {
      setForm({
        state: Form.Error,
        message: error
      });
      return;
    }

    inputEl.current.value = '';

    setForm({
      state: Form.Success,
      message: `Success! You've been added to the list!`
    });
  }
}
마지막으로, 구성 요소에서 접근할 수 있도록 갈고리에 만들어진 여러 항목을 공개합니다.
return { subscribe, inputEl, form };
마지막 갈고리는 다음과 같아야 한다.
export function useSubscribeToNewsletter() {
  const [form, setForm] = useState<FormState>({ state: Form.Initial });
  const inputEl = useRef(null);

  async function subscribe(e) {
    e.preventDefault();
    setForm({ state: Form.Loading });

    const res = await fetch(`/api/subscribe`, {
      body: JSON.stringify({
        email: inputEl.current.value
      }),
      headers: {
        'Content-Type': 'application/json'
      },
      method: 'POST'
    });

    const { error } = await res.json();

    if (error) {
      setForm({
        state: Form.Error,
        message: error
      });
      return;
    }

    inputEl.current.value = '';
    setForm({
      state: Form.Success,
      message: `Success! You've been added to the list!`
    });
  }

  return { subscribe, inputEl, form };
}

가입 구성 요소 만들기

Subscribe.js라는 새 구성 요소를 만들고 useSubscribeToNewsletter 갈고리를 가져와 분해form, subscribe 및 inputEl 값을 가져옵니다.
export function Subscribe() {
  const { form, subscribe, inputEl } = useSubscribeToNewsletter();

}
다음에 등록 폼을 만들기 위해 적당한 태그를 추가합니다.당신의 요구를 만족시키기 위해 아래의 표시를 마음대로 조정하십시오.
export function Subscribe() {
  const { form, subscribe, inputEl } = useSubscribeToNewsletter();

    return (
    <div>
      <p>Updates delivered to your inbox!</p>

      <p>
        A periodic update about my life, recent blog posts, how-tos, and
        discoveries.
      </p>
      <p>No spam - unsubscribe at any time!</p>

      <form onSubmit={subscribe}>
        <input
          ref={inputEl}
          placeholder="[email protected]"
          type="email"
          autoComplete="email"
          required
        />
        <button type="submit">
          {form.state === Form.Loading ? <span>loading...</span> : 'Subscribe'}
        </button>
      </form>
    </div>
  );
}
subscribe 이벤트에 첨부된 onSubmit 함수와 입력 요소의 inputEl 인용에 주의하십시오.
폼이 제출 중인 경우가 아니면, 이 단추는 행동 호출을 제공합니다. 이 경우, 사용자에게 시각적 피드백을 제공하기 위해 업데이트됩니다.

👏 Feel free to add the appropriate logic to display an error or provide visual feedback to the user of a successful submission.


결론


이 실현에는 세 가지 주요 역할이 있는데 그것이 바로 구성 요소, 갈고리와 다음이다.JSAPI 라우팅이 구성 요소는 논리가 갈고리에 봉해져 있고, 다음은 갈고리에 봉해져 있기 때문에 여전히 간단하다.js API Route는 트위터 Revue 뉴스레터 API에 연락하고 구독자를 목록에 추가할 수 있는 권한을 부여받았습니다.
폼에 스타일을 추가하고 구독을 시도해 보세요!
읽어주셔서 감사합니다!
만약 네가 이 문장이 도움이 된다고 생각한다면, 아래에서 나의 시사 통신을 등록하는 것을 고려할 수 있다.나는 항상 이렇게 유용한 문장을 쓴다. 매달 너에게 새로운 문장을 통지할 것이다.
RX 마이크로컴퓨터 성능(지연 시) 비교
제한 input은 소수점 두 자리만 입력할 수 있습니다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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