Next.js의 API 라우트, riot api 개발

https://developer.riotgames.com/apis

Riot Developer Portal

 

위의 공식 게임회사의 제공된 API 사이트를 참고하여 특정 데이터를 가져올때, 프론트엔드에서 직접 Riot API를 호출하면 Riot에서 400대의 에러를 반환할 것이다. 보안상의 이유로 직접 프론트엔드에서 호출하는 것을 권장하지 않기 때문이다. API는 백엔드 서버를 통해 처리해야 한다.

 

하지만 백엔드 서버를 따로 작성하고 싶지 않을때, Next.js에서 지원하는 서버 사이드 렌더링을 통하여 프론트엔드와 백엔드 코드를 함께 작성할 수 있다.

import type { NextApiRequest, NextApiResponse } from 'next';
import axios from 'axios';

const RIOT_API_KEY = process.env.NEXT_PUBLIC_RIOT_API_KEY;
const ACCOUNT_REGION = 'kr';
const MATCH_REGION = 'asia';

const getSummonerByPUUID = async (puuid: string) => {
  const url = `https://${ACCOUNT_REGION}.api.riotgames.com/lol/summoner/v4/summoners/by-puuid/${puuid}`;
  return axios.get(url, {
    headers: {
      'X-Riot-Token': RIOT_API_KEY,
    },
  });
};

 

NextApiRequest와 NextApiResponse는 Next.js에서 API 라우트를 작성할 때 사용하는 타입이다. 이 타입들은 각각 HTTP 요청과 응답을 나타내며, Express.js와 같은 기존 Node.js 서버에서 사용하는 Request와 Response 객체와 유사한 역할을 한다. Next.js API 라우트에서 이 객체들을 사용하여 클라이언트의 요청을 처리하고 응답을 보낼 수 있다.

 

NextApiRequest는 클라이언트로부터 오는 HTTP 요청을 나타낸다. 이 객체에는 요청과 관련된 다양한 정보가 포함되어 있다.

• req.query: URL 쿼리 문자열을 객체 형태로 포함한다. 예를 들어, URL이 /api/hello?name=John이라면 req.query는 { name: 'John' }이 된다.
• req.body: 요청 본문을 포함한다. 주로 POST, PUT 요청에서 사용된다.
• req.cookies: 요청에 포함된 쿠키를 객체 형태로 포함한다.
• req.method: HTTP 요청 메서드를 나타낸다 (예: GET, POST, PUT, DELETE 등).
• req.headers: 요청 헤더를 포함한다.

 

NextApiResponse는 서버에서 클라이언트로 보내는 HTTP 응답을 나타낸다. 이 객체를 사용하여 클라이언트에 데이터를 보내거나 상태 코드를 설정할 수 있다.

 

• res.status(code: number): 응답 상태 코드를 설정한다. 예를 들어, res.status(200)은 성공 상태 코드를 설정한다.
• res.json(data: any): JSON 형식의 데이터를 응답으로 보낸다.
• res.send(data: any): 문자열이나 버퍼 데이터를 응답으로 보낸다.
• res.setHeader(name: string, value: string | string[]): 응답 헤더를 설정한다.

 

적용 사례 url: (예시 입력 데이터: hide on bush # kr1)

https://www.theze.de/team-balance

https://www.theze.de/team-balance