Next.js API Routes 사용법: 서버리스 기능 구현하기

작성일 : 2024-08-03

Next.js API Routes 사용법: 서버리스 기능 구현하기

Next.js는 React를 기반으로 하는 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다. Next.js의 한 가지 강력한 기능은 API Routes를 통해 서버리스(serverless) 기능을 구현할 수 있다는 것입니다. 이 글에서는 Next.js의 API Routes를 사용하여 서버리스 API를 구현하는 방법에 대해 단계별로 알아보겠습니다.

API Routes란?

Next.js의 API Routes는 서버리스 함수(Serverless Function)를 사용하여 API를 구현할 수 있는 기능입니다. 다른 서버리스 플랫폼과 유사하게, API Routes를 사용하면 서버 설정이나 관리 없이 코드만으로 간단하게 API 엔드포인트를 생성할 수 있습니다. 이는 특히 빠르게 프로토타입을 제작하거나, 서버 관련 유지보수 없이 기능을 추가하고자 할 때 유용합니다.

API Routes 설정하기

API Routes를 사용하여 API 엔드포인트를 생성하려면 pages/api 디렉토리에 파일을 생성하면 됩니다. 여기서 파일명은 엔드포인트의 경로가 됩니다. 예를 들어, pages/api/hello.js 파일을 생성하면 /api/hello 경로에서 접근할 수 있는 API가 됩니다.

다음은 기본적인 API Routes 설정 예제입니다:


javascript
// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, World!' });
}

위 코드에서는 기본적인 GET 요청을 처리하는 API를 생성합니다. 요청이 들어오면 상태 코드 200과 함께 Hello, World!라는 메시지를 반환합니다.

HTTP 메서드 처리

Next.js의 API Routes에서는 다양한 HTTP 메서드(GET, POST, PUT, DELETE 등)를 처리할 수 있습니다. 이를 위해 req.method를 사용하여 요청의 메서드를 확인하고, 그에 맞는 로직을 작성하면 됩니다.

다음은 간단한 예제로 GET 및 POST 요청을 처리하는 API입니다:


javascript
// pages/api/user.js
export default function handler(req, res) {
  const { method } = req;

  switch (method) {
    case 'GET':
      // GET 요청 처리
      res.status(200).json({ id: 1, name: 'Jane Doe' });
      break;
    case 'POST':
      // POST 요청 처리
      const { name } = req.body;
      res.status(201).json({ id: 2, name });
      break;
    default:
      // 그 외의 메서드 처리
      res.setHeader('Allow', ['GET', 'POST']);
      res.status(405).end(`Method ${method} Not Allowed`);
  }
}

이 코드에서는 GET 요청에 대해 샘플 사용자 데이터를, POST 요청에 대해 요청 본문(req.body)에서 이름을 받아 새로운 사용자 데이터를 반환합니다.

미들웨어 사용

API Routes에서도 미들웨어를 활용하여 요청을 전처리하거나 후처리할 수 있습니다. 예를 들어, cors 미들웨어를 사용하여 CORS(Cross-Origin Resource Sharing)를 설정할 수 있습니다.

다음은 cors 미들웨어를 설정하는 예제입니다:


javascript
// pages/api/cors.js
import Cors from 'cors';

// 미들웨어 적용 함수
function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result);
      }
      return resolve(result);
    });
  });
}

const cors = Cors({
  methods: ['GET', 'HEAD'],
});

export default async function handler(req, res) {
  // 미들웨어 적용
  await runMiddleware(req, res, cors);

  res.status(200).json({ message: 'CORS 설정 적용됨' });
}

이 예제에서는 cors 미들웨어를 적용하여 GET과 HEAD 메서드에 대해 CORS 설정을 적용합니다.

환경 변수 사용

API Routes에서도 환경 변수를 사용할 수 있습니다. 환경 변수는 .env.local 파일에 정의하고, 이 파일은 로컬 환경에서만 사용되며 배포 시에는 포함되지 않습니다.

다음은 환경 변수를 사용하여 API 키를 관리하는 예제입니다:


javascript
// pages/api/env.js
export default function handler(req, res) {
  const apiKey = process.env.API_KEY;
  res.status(200).json({ apiKey });
}

.env.local 파일에 다음과 같이 설정합니다:

API_KEY=your_api_key_here

이렇게 설정하면 API 키를 코드에 직접 포함하지 않고도 사용할 수 있습니다.

배포 및 사용 예

Next.js 앱을 배포하면 API Routes도 함께 배포됩니다. Vercel과 같은 호스팅 플랫폼을 사용하면 별도의 설정 없이도 API Routes를 사용할 수 있습니다.

API Routes는 클라이언트 측에서 간단하게 호출할 수 있습니다. 예를 들어, React 컴포넌트에서 fetch를 사용하여 API를 호출할 수 있습니다:


javascript
import { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/hello')
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);

  return (
    <div>
      <h1>{data}</h1>
    </div>
  );
}

export default App;

이 예제에서는 /api/hello 엔드포인트를 호출하여 데이터를 가져와 화면에 표시합니다.

결론

Next.js의 API Routes는 서버리스 환경에서 간단하면서도 강력한 API를 구축할 수 있는 도구입니다. 설정과 사용이 매우 쉬우며, 다양한 HTTP 메서드를 다루고 미들웨어와 환경 변수를 사용하여 더욱 확장할 수 있습니다. 이 글을 통해 API Routes의 기본적인 사용법과 응용 방법을 이해하고, 실습을 통해 자신만의 서버리스 API를 만들어 보시기 바랍니다.