린찬승하우스: 9. API 라우트 만들기 – Next.js에서 API 라우트 작성하기

2025년 1월 18일 토요일

9. API 라우트 만들기 – Next.js에서 API 라우트 작성하기

Next.js는 서버 사이드 기능을 쉽게 구현할 수 있는 강력한 기능을 제공합니다. 그 중 하나가 API 라우트입니다. API 라우트를 사용하면 서버 측에서 데이터 처리를 할 수 있으며, 클라이언트와의 통신을 처리하는 데 매우 유용합니다. 이번 글에서는 Next.js에서 API 라우트를 작성하는 방법에 대해 알아보겠습니다.

Next.js API 라우트, API 라우트 작성, POST 요청 처리, GET 요청 처리, Next.js 외부 API 호출, MongoDB 연결, 데이터베이스 연동

1. API 라우트란?

Next.js에서 API 라우트는 pages/api 디렉토리 내에서 작성할 수 있습니다. 이 디렉토리 내에 파일을 생성하면, 해당 파일은 자동으로 API 엔드포인트로 작동하게 됩니다. 클라이언트에서 해당 API를 호출하여 데이터를 주고받을 수 있습니다.

API 라우트는 서버 측에서 처리하는 코드를 작성할 수 있기 때문에, 데이터베이스와의 연동, 외부 API 호출, 파일 업로드 등을 처리할 수 있습니다.

2. API 라우트 생성하기

Next.js에서 API 라우트를 만들려면 pages/api 폴더 내에 파일을 생성하면 됩니다. 예를 들어, pages/api/hello.js 파일을 만들면 /api/hello 경로로 API 요청을 처리할 수 있습니다.

예시: 간단한 GET 요청 처리


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

위 예시에서 handler 함수는 요청을 처리하는 함수입니다. req는 클라이언트에서 보낸 요청 객체이고, res는 응답 객체입니다. res.status(200)으로 HTTP 상태 코드를 설정하고, res.json()을 사용해 JSON 형식의 데이터를 반환합니다.

이제 브라우저에서 http://localhost:3000/api/hello를 방문하면 { "message": "Hello, Next.js API!" }라는 응답을 받을 수 있습니다.

3. POST 요청 처리하기

API 라우트에서는 GET뿐만 아니라 POST 요청도 처리할 수 있습니다. POST 요청은 보통 데이터를 서버로 보내거나, 새로운 리소스를 생성할 때 사용됩니다.

예시: POST 요청 처리


// pages/api/greet.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    const { name } = req.body;
    res.status(200).json({ message: `Hello, ${name}!` });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

위 예시에서 req.body를 사용해 클라이언트에서 보내온 데이터를 처리합니다. POST 요청을 보내면 이름을 받아서 인사를 반환합니다. 만약 GET 요청을 보내면 405 Method Not Allowed 상태 코드와 함께 오류 메시지를 반환합니다.

4. API 라우트에서 외부 API 호출하기

Next.js의 API 라우트는 외부 API와 연동할 때도 유용하게 사용할 수 있습니다. fetch나 axios를 사용하여 외부 API로 데이터를 요청하고, 그 결과를 클라이언트에 반환할 수 있습니다.

예시: 외부 API 호출하기


// pages/api/weather.js
import fetch from 'node-fetch';

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const response = await fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=Seoul');
    const data = await response.json();
    res.status(200).json(data);
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

위 예시에서는 외부의 날씨 API를 호출하여 서울의 날씨 정보를 받아오고, 그 데이터를 클라이언트에게 반환합니다. node-fetch를 사용하여 API 요청을 보내고 응답을 처리합니다. YOUR_API_KEY 부분에는 실제 API 키를 입력해야 합니다.

5. API 라우트에서 데이터베이스 연결하기

Next.js API 라우트를 사용하면 데이터베이스와의 연동도 쉽게 처리할 수 있습니다. 예를 들어, MongoDB나 MySQL과 연결하여 데이터를 저장하거나 조회할 수 있습니다.

예시: MongoDB 연결하기


// pages/api/posts.js
import { MongoClient } from 'mongodb';

const client = new MongoClient('mongodb://localhost:27017', { useNewUrlParser: true, useUnifiedTopology: true });

export default async function handler(req, res) {
  if (req.method === 'GET') {
    try {
      await client.connect();
      const database = client.db('mydatabase');
      const posts = await database.collection('posts').find().toArray();
      res.status(200).json(posts);
    } catch (error) {
      res.status(500).json({ message: 'Database connection error' });
    } finally {
      await client.close();
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

위 예시는 MongoDB 데이터베이스에서 posts 컬렉션의 데이터를 조회하는 API를 구현한 것입니다. MongoDB 클라이언트를 사용하여 데이터베이스와 연결하고, 조회한 데이터를 클라이언트에 반환합니다.

6. 결론

Next.js에서 API 라우트를 작성하는 방법은 매우 간단하고 유용합니다. API 라우트를 사용하면 서버 사이드에서 다양한 작업을 처리할 수 있으며, 클라이언트와 데이터를 주고받을 수 있습니다. Next.js의 API 라우트를 활용하면 데이터베이스 연동, 외부 API 호출, 파일 업로드 등 다양한 서버 측 기능을 손쉽게 구현할 수 있습니다.

이제 Next.js에서 API 라우트를 작성하여 백엔드와 프론트엔드의 연동을 더욱 효율적으로 처리할 수 있습니다.

린찬승하우스