Next.js에서 API 서버 개발하기

18 Oct 2023

nextjs

Next.js는 React 기반의 JavaScript 프레임워크로, SSR(Server-Side Rendering)과 CSR(Client-Side Rendering)을 모두 지원하여 빠르고 효율적인 웹 애플리케이션을 개발할 수 있습니다. 이번 포스트에서는 Next.js에서 API 서버를 개발하는 방법에 대해 알아보겠습니다.

1. API 경로 생성하기

Next.js에서 API 서버를 개발하려면 pages/api 디렉터리를 생성해야 합니다. 이 디렉터리에는 API 요청을 처리하는 JavaScript 파일들을 작성할 수 있습니다.

// pages/api/users.js

export default function handler(req, res) {
  const users = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Bob' },
  ];

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

위의 예시 코드는 /api/users 경로에 접속하면 users 데이터를 JSON 형식으로 반환하는 API 엔드포인트를 생성합니다.

2. API 요청 처리하기

Next.js의 API 엔드포인트에서는 req와 res 매개변수를 통해 요청과 응답을 처리할 수 있습니다. req는 요청에 관련된 정보를 포함하고 있으며, res는 응답을 생성하는 메소드들을 제공합니다.

요청 방식에 따라 다양한 핸들러 함수들을 사용할 수 있습니다. 예를 들어, GET 요청은 req.method를 통해 확인하고, POST 등 다른 요청은 switch 문을 사용하여 처리할 수 있습니다.

// pages/api/users.js

export default function handler(req, res) {
  switch (req.method) {
    case 'GET':
      // handle GET request
      break;
    case 'POST':
      // handle POST request
      break;
    default:
      res.status(405).end(); // Method Not Allowed
      break;
  }
}

3. 데이터베이스와의 연동하기

실제로 데이터베이스와의 연동을 위해서는 해당 데이터베이스의 패키지를 설치하고 설정해야 합니다. 예를 들어, MongoDB를 사용하려면 mongodb 패키지를 설치하고 연결 설정을 해야 합니다.

npm install mongodb

// 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) {
  if (req.method === 'GET') {
    try {
      await client.connect();
      // handle GET request with database
      client.close();
    } catch (err) {
      res.status(500).json({ error: 'Database connection failed' });
    }
  } else {
    res.status(405).end(); // Method Not Allowed
  }
}

4. 환경 변수 설정하기

Next.js에서는 API 서버와 데이터베이스 연동과 같은 중요한 정보를 저장하기 위해 환경 변수 사용을 권장합니다. 환경 변수를 사용하면 애플리케이션의 보안성과 유연성을 향상시킬 수 있습니다.

.env.local 파일을 프로젝트 루트 경로에 생성하고, 다음과 같이 환경 변수를 설정합니다.

MONGODB_URI=mongodb://localhost:27017/mydatabase

위의 예시는 MongoDB의 연결 URI를 MONGODB_URI라는 환경 변수에 저장한 것입니다. 실제로는 본인의 데이터베이스 설정에 맞게 수정해야 합니다.

마무리

이제 Next.js에서 API 서버를 개발하는 방법에 대해 알아보았습니다. API 경로 생성, API 요청 처리, 데이터베이스 연동, 환경 변수 설정에 대해 알아봤습니다. Next.js를 활용하여 강력하고 유연한 웹 애플리케이션을 개발할 수 있습니다. 추가적인 내용은 Next.js 공식 문서를 참고하시기 바랍니다.

Next.js 공식 문서 #Nextjs #API