Next.js에서의 API 라우트 설정: API 라우트 구성과 데이터 핸들링

Next.js는 React 기반의 프레임워크로, 프론트엔드와 백엔드 기능을 동시에 제공하는 데 최적화되어 있습니다. 이 글에서는 Next.js의 API 라우트 기능을 사용해 서버리스 API를 설정하고 데이터를 처리하는 방법을 알아보겠습니다. API 라우트는 프로젝트 폴더 구조 내에서 쉽게 만들 수 있으며, 서버리스 함수로 실행됩니다.

API 라우트 생성

API 라우트를 생성하는 첫 단계는 프로젝트의 pages 디렉터리 내에 새로운 폴더 api를 만드는 것입니다. 이 폴더 내에서 JavaScript 또는 TypeScript 파일을 생성하여 API 엔드포인트를 정의할 수 있습니다.

예를 들어, user.js라는 파일을 생성하여 사용자 데이터를 반환하는 API 라우트를 구성할 수 있습니다. 다음은 이 파일의 내용입니다:

javascript
// 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' });
  }
}

위 코드에서는 GET 요청이 들어왔을 때 사용자 정보를 JSON 형식으로 반환합니다. 그 외의 요청 메서드에 대해서는 405 Method Not Allowed 상태 코드를 반환합니다.

라우트 구성

Next.js의 API 라우트는 파일 시스템 기반의 라우팅을 사용합니다. 이는 pages/api 폴더 내의 파일 이름이 자동으로 URL 경로가 됨을 의미합니다. 예를 들어, 위의 user.js 파일은 /api/user 경로로 접근할 수 있습니다.

다음은 몇 가지 예시입니다:

• pages/api/posts.js -> /api/posts
• pages/api/comments/index.js -> /api/comments
• pages/api/products/[id].js -> /api/products/[id]

[id].js와 같은 파일 이름은 동적 라우트를 지원하여 URL 매개변수를 처리할 수 있게 해줍니다.

데이터 핸들링

API 라우트에서 데이터 핸들링은 매우 간단합니다. 일반적으로 데이터베이스 연결, 외부 API 호출, 또는 파일 시스템 접근과 같은 작업을 수행할 수 있습니다. 다음은 MongoDB를 사용해 데이터를 가져오는 예제입니다:

javascript
// pages/api/user.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) {
  if (req.method === 'GET') {
    try {
      await client.connect();
      const database = client.db('mydatabase');
      const users = database.collection('users');
      const user = await users.findOne({ name: 'John Doe' });
      res.status(200).json(user);
    } catch (error) {
      res.status(500).json({ error: 'Internal Server Error' });
    } finally {
      await client.close();
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

위 예제는 MongoDB 클라이언트를 사용해 데이터베이스에 연결하고 특정 사용자를 찾아 반환합니다. 데이터베이스 URI는 환경 변수를 통해 설정되며, 이는 보안적인 이유로 매우 중요합니다.

다양한 방법

API 라우트에서 할 수 있는 작업은 매우 다양합니다. 다음은 몇 가지 예시입니다.

외부 API 호출

외부 API 호출을 통해 데이터를 가져오는 예제입니다.

javascript
// pages/api/external.js
import axios from 'axios';

export default async function handler(req, res) {
  if (req.method === 'GET') {
    try {
      const response = await axios.get('https://api.example.com/data');
      res.status(200).json(response.data);
    } catch (error) {
      res.status(500).json({ error: 'Failed to fetch data' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

위 코드에서는 axios 라이브러리를 사용해 외부 API로부터 데이터를 가져와 클라이언트에게 반환합니다.

폼 데이터 처리

POST 요청을 통해 폼 데이터를 처리하는 예제입니다.

javascript
// pages/api/form.js

export default function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body;
    // 폼 데이터 처리 로직
    res.status(200).json({ message: 'Form submitted successfully', formData: { name, email } });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

위 예제에서는 POST 요청으로 전송된 폼 데이터를 받아 처리합니다.

결론

Next.js의 API 라우트는 강력하면서도 사용하기 쉬운 기능으로, 프로젝트 내에서 서버리스 API를 구현하는 데 많은 도움이 됩니다. Next.js 프로젝트에 API 라우트를 추가함으로써 백엔드 로직을 효율적으로 관리하고 확장할 수 있습니다.