[Next] API Routes

☑️ API Routes란?

Next.js의 API Routes는 프론트엔드와 백엔드 통합이 쉬운 Next.js 앱에서 서버 기능을 구현할 수 있도록 해주는 강력한 기능이다. 이를 통해 별도의 백엔드 서버 없이도 클라이언트 요청을 처리하고, 데이터베이스와 상호작용하거나 서드파티 API(소셜 로그인 API, 지도API 등등)로부터 데이터를 불러와서 전달하는 등의 작업을 수행할 수 있다.

---

☑️ API Routes 기본 구조

Next.js 앱을 생성하면 pages/api 폴더가 자동으로 생성되며, 이곳에 API 엔드포인트를 정의하는 파일들을 추가할 수 있다. 예를 들어, 기본적으로 포함된 pages/api/hello 파일을 살펴보자.

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";

type Data = {
  name: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>,
) {
  res.status(200).json({ name: "John Doe" });
}

이 코드는 Next.js의 API Route에서 가장 기본적인 구조를 보여준다.

• Request와 Response 객체: handler 함수는 req와 res를 매개변수로 받습니다. req는 클라이언트의 요청 정보를 담고 있으며, res는 서버에서 클라이언트로 보낼 응답을 제어하는 객체이다.
• 응답 데이터: res.status(200).json({ name: "John Doe" })를 통해 status(200)으로 HTTP 상태 코드를 설정하고, JSON 형식의 데이터를 응답으로 보낸다.

---

☑️ API Route 활용 예시

API Routes를 이용해 간단한 CRUD (Create, Read, Update, Delete) 기능을 구현하거나, 외부 API를 호출하여 데이터를 가공하고 클라이언트에 전달할 수도 있다.

예를 들어, 클라이언트 요청에 따라 데이터베이스에서 사용자 정보를 가져오는 API를 작성하고 싶다면 pages/api/user/[id].ts 파일을 생성하여 아래와 같이 작성할 수 있다.

import type { NextApiRequest, NextApiResponse } from 'next';
import { getUserById } from '../../lib/database'; // 예시 데이터베이스 함수

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { id } = req.query;

  if (req.method === 'GET') {
    try {
      const user = await getUserById(id as string);
      if (user) {
        res.status(200).json(user);
      } else {
        res.status(404).json({ message: 'User not found' });
      }
    } catch (error) {
      res.status(500).json({ message: 'Internal Server Error' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

---

☑️ API Routes의 장점

1. 프론트엔드와 백엔드의 통합: Next.js의 API Routes는 별도의 서버 없이 백엔드 기능을 구현할 수 있어, 프로젝트 구조를 간소화할 수 있다.
2. 빠른 개발과 유지보수: API Routes를 통해 앱 내부에서 API 엔드포인트를 빠르게 추가하고, 필요 시 수정하여 유지보수를 간편하게 할 수 있다.
3. 서드파티 API 통합: API Routes는 외부 API와 쉽게 통합하여 데이터 가공 및 전달이 가능하며, 서버에서 실행되므로 클라이언트 키 관리에도 유리하다.

🎓 정리

Next.js의 API Routes는 서버리스 환경에서 앱의 백엔드 기능을 구현할 수 있도록 해준다. API Routes로 동적 웹앱의 다양한 요청을 처리하고, 효율적인 데이터 관리를 통해 확장성 있는 앱을 만들 수 있다.