[Next] API Routes 이해하기

Next.js는 프론트엔드와 백엔드가 결합된 풀스택 개발을 지원하는 프레임워크로, API Routes 기능을 통해 서버 사이드에서 API를 손쉽게 작성할 수 있습니다. 이번 글에서는 API Routes에 대해 자세히 설명하고, 언제 사용하는 것이 좋을지, 그리고 외부 API 호출을 어떻게 처리할 수 있는지에 대해 다뤄보겠습니다.

🛎️ App Router를 사용하고 있다면, Server Components나 Route Handlers를 사용하는 것을 추천합니다.

🎀 API Routes란?

API Routes는 Next.js에서 서버 사이드에서 실행되는 API 엔드포인트를 정의할 수 있는 기능입니다. pages/api 폴더에 있는 파일들은 API 엔드포인트로 처리되며, 클라이언트는 이 엔드포인트에 HTTP 요청을 보내어 데이터를 받아옵니다.

• 엔드포인트: pages/api/에 위치한 파일은 /api/* 경로로 매핑됩니다.
• 응답: 해당 API는 HTML 페이지 대신 JSON 데이터나 상태 코드를 반환합니다.

엔드포인트(Endpoint)는 클라이언트와 서버 간의 통신 지점을 의미하는 용어입니다. 웹 개발에서 엔드포인트는 클라이언트가 서버에 요청을 보내는 특정 URL 경로를 말하며, 서버는 이 엔드포인트에 맞는 동작을 수행한 후 응답을 반환합니다.

🧀 API Routes의 특징

1. 서버에서만 실행
pages/api 폴더의 코드는 클라이언트에서 실행되지 않으며, Next.js 서버에서만 실행됩니다. 즉, 브라우저로 보내는 JS번들링 파일에 포함되어 있지 않아서 클라이언트에서는 접근할 수 없습니다.

2. 보안 처리
민감한 정보나 비공개 API 키 등을 클라이언트에게 노출하지 않고 서버 측에서만 처리할 수 있습니다.

3. 프론트엔드와 백엔드 통합
백엔드 서버 없이 프론트엔드와 함께 API를 개발하고 운영할 수 있습니다.

🍪 API Routes 활용 예시

1. 외부 API 호출 처리
외부 API를 호출할 때, 클라이언트에서 직접 호출하는 대신 API Routes를 중간에서 처리하는 것이 좋습니다. 이를 통해 민감한 정보를 보호할 수 있습니다.

// pages/api/weather.js
export default async function handler(req, res) {
  const apiKey = process.env.WEATHER_API_KEY; // 서버에서만 사용
  const response = await fetch(`https://weatherapi.com/data?key=${apiKey}`);
  const data = await response.json();
  res.status(200).json(data);
}

2. 데이터 가공 및 최적화
외부 API에서 받은 데이터를 클라이언트가 필요로 하는 형태로 가공한 후 반환할 수 있습니다.

// pages/api/forecast.js
export default async function handler(req, res) {
  const response = await fetch('https://weatherapi.com/data');
  const rawData = await response.json();

  const processedData = rawData.forecast.map((day) => ({
    date: day.date,
    temperature: day.temp,
    condition: day.condition,
  }));

  res.status(200).json(processedData);
}

3. 보안 검증 및 데이터 처리
사용자가 보낸 데이터를 서버에서 검증하거나 처리한 후 결과를 반환할 수 있습니다. 예를 들어, 로그인 검증이나 데이터베이스 접근을 서버에서 처리하는 경우입니다.

// pages/api/login.js
export default async function handler(req, res) {
  const { username, password } = req.body;
  
  // 로그인 검증 로직
  if (username === 'admin' && password === 'password') {
    res.status(200).json({ message: 'Login successful' });
  } else {
    res.status(401).json({ message: 'Invalid credentials' });
  }
}

🥓 결론

Next.js의 API Routes는 프론트엔드와 백엔드를 하나의 코드베이스에서 관리할 수 있는 강력한 도구입니다. 외부 API 통합, 보안 처리, 데이터 가공 등을 쉽게 구현할 수 있으며, 민감한 정보는 서버에서만 처리되도록 할 수 있습니다. API Routes를 적절히 활용하면 효율적이고 안전한 애플리케이션을 개발할 수 있습니다.

이번 글은 Next.js의 공식문서를 참고하여 작성되었으며, API Routes에 대해 더 자세한 정보가 궁금하다면 API Routes를 참고하세요.