[Next.js14 강의] 13강 - API Routes 사용법 (API 경로 생성 및 데이터 처리)

안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 Next.js에서 API Routes를 사용하여 서버리스 API를 구축하는 방법을 배웁니다. API Routes를 통해 데이터를 처리하고, 클라이언트와 서버 간의 통신을 구현하는 기본적인 사용법과 다양한 예제를 다룹니다.

 

 

1. API Routes란 무엇인가?

 

개념

· Next.js에서 API Routes는 서버리스 함수를 생성할 수 있는 기능을 제공합니다. 이를 통해 별도의 서버 없이도 간단한 API를 정의하고, 데이터를 처리하거나 외부 API와 통신할 수 있습니다.
· pages/api 디렉토리에 파일을 생성하면 해당 파일이 API Endpoint로 자동 설정됩니다.

반응형

API Routes의 특징

· 서버리스 함수: Next.js의 API Routes는 서버리스 환경에서 실행됩니다. 이는 서버를 직접 관리할 필요 없이 서버리스 제공 업체에서 처리해 준다는 뜻입니다.
· Node.js 환경: API Routes는 Node.js 환경에서 실행되므로, Node.js의 모듈과 라이브러리를 사용할 수 있습니다.
· 자동 코드 분할: 각 API Route는 필요할 때만 호출되며, 필요한 코드만 로드하여 효율적입니다.

 

 

2. API Routes 생성하기

API Routes를 생성하려면 pages/api 디렉토리 안에 파일을 만들면 됩니다. 파일 이름은 API 경로가 됩니다.

 

기본 예제

아래와 같이 pages/api/hello.js 파일을 생성하면 /api/hello 경로로 접근할 수 있는 API가 생성됩니다.

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

 

위 API는 HTTP GET 요청을 처리하며, 클라이언트로 간단한 JSON 응답을 반환합니다.

728x90

API 호출 방법

클라이언트에서 API를 호출하려면 fetch나 axios 등을 사용할 수 있습니다.

// 클라이언트 예시 (React 컴포넌트)
import { useEffect, useState } from 'react';

export default function HomePage() {
  const [message, setMessage] = useState('');

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

  return <div>{message}</div>;
}

 

 

 

3. HTTP 메서드별 데이터 처리

API Routes에서 다양한 HTTP 메서드를 처리할 수 있습니다. Next.js에서는 req(request)와 res(response) 객체를 사용하여 HTTP 메서드에 따라 로직을 분기할 수 있습니다.

 

GET 요청 처리

GET 요청은 데이터를 가져올 때 사용됩니다.

// pages/api/user.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ name: 'John Doe', age: 30 });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

 

SMALL

POST 요청 처리

POST 요청은 데이터를 생성하거나 서버에 전달할 때 사용됩니다.

// pages/api/user.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    const { name, age } = req.body;  // 클라이언트로부터 전달된 데이터
    // 데이터를 처리하는 로직 추가
    res.status(201).json({ message: 'User created', user: { name, age } });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

 

PUT, DELETE 요청 처리

PUT 요청은 데이터를 업데이트할 때, DELETE 요청은 데이터를 삭제할 때 사용됩니다. 예를 들어 사용자 데이터를 업데이트하거나 삭제하는 API를 만들 수 있습니다.

// pages/api/user/[id].js
export default function handler(req, res) {
  const { id } = req.query; // URL 쿼리에서 ID 가져오기

  if (req.method === 'PUT') {
    // 데이터를 업데이트하는 로직 추가
    res.status(200).json({ message: `User ${id} updated` });
  } else if (req.method === 'DELETE') {
    // 데이터를 삭제하는 로직 추가
    res.status(200).json({ message: `User ${id} deleted` });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

 

 

 

4. API Routes에서 데이터베이스와 통신하기

API Routes를 사용하여 데이터베이스와 통신할 수 있습니다. 예를 들어, MongoDB, MySQL, PostgreSQL 등과 연결하여 데이터를 가져오거나 수정할 수 있습니다.

MongoDB와 통신 예제

MongoDB 클라이언트 라이브러리를 사용하여 API Routes에서 데이터를 처리합니다.

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

const uri = process.env.MONGODB_URI;
const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });

export default async function handler(req, res) {
  try {
    await client.connect();
    const collection = client.db('mydatabase').collection('users');

    if (req.method === 'GET') {
      const users = await collection.find({}).toArray();
      res.status(200).json(users);
    } else if (req.method === 'POST') {
      const newUser = req.body;
      await collection.insertOne(newUser);
      res.status(201).json({ message: 'User added' });
    } else {
      res.status(405).json({ message: 'Method Not Allowed' });
    }
  } catch (error) {
    res.status(500).json({ message: 'Internal Server Error', error });
  } finally {
    await client.close();
  }
}

 

위 예제에서는 MongoDB 클라이언트를 사용하여 데이터베이스에 연결하고, GET 및 POST 요청에 따라 데이터를 가져오거나 추가합니다.

 

 

5. 에러 처리 및 응답 코드 관리

 

에러 처리

API Routes에서 에러를 처리할 때는 try...catch 문을 사용하여 발생 가능한 오류를 잡고, 적절한 응답 코드를 반환해야 합니다.

 

응답 코드 관리

각 API는 성공 시 적절한 HTTP 응답 코드(200, 201 등)를 반환하고, 오류 발생 시 400, 500 등의 코드를 반환하여 클라이언트가 문제를 이해할 수 있도록 합니다.

export default function handler(req, res) {
  try {
    if (req.method === 'POST') {
      // 데이터 처리 로직
      res.status(201).json({ message: 'Resource created' });
    } else {
      res.status(405).json({ message: 'Method Not Allowed' });
    }
  } catch (error) {
    res.status(500).json({ message: 'Internal Server Error', error: error.message });
  }
}

 

 

이번 강의에서는 Next.js에서 API Routes를 사용하여 간단한 API를 생성하고, 다양한 HTTP 메서드를 처리하는 방법을 배웠습니다. API Routes를 사용하면 서버리스 환경에서 손쉽게 데이터 처리와 API 통신을 구현할 수 있습니다.

 

 

 

 

 

- 이전 수업 목록