Next.js는 React 기반의 프레임워크로서, 서버사이드 렌더링과 클라이언트사이드 렌더링을 모두 지원합니다. 이 프레임워크를 사용하여 API 엔드포인트를 작성하려면 다음 단계를 따라 진행할 수 있습니다.

1. API 폴더 생성하기

먼저, Next.js 프로젝트의 루트 디렉토리에서 pages 디렉토리 안에 api 디렉토리를 생성합니다. 이 디렉토리는 API 엔드포인트를 작성하는 데 사용됩니다. 다음과 같은 명령어를 사용하여 디렉토리를 생성할 수 있습니다.

mkdir pages/api

2. API 엔드포인트 작성하기

이제 api 디렉토리 내에 실제 API 엔드포인트를 작성할 파일을 생성합니다. 예를 들어, pages/api/users.js라는 파일을 생성하여 사용자 정보를 반환하는 API 엔드포인트를 작성해보겠습니다.

// pages/api/users.js

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

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

위의 예제에서는 handler 함수를 내보내 API 엔드포인트를 정의합니다. 이 함수는 요청(request)과 응답(response) 객체를 매개변수로 받습니다. 이 예제에서는 하드코딩된 사용자 데이터를 반환하고 있습니다.

3. API 엔드포인트 테스트하기

작성한 API 엔드포인트를 테스트해보기 위해 Next.js 애플리케이션을 실행해야 합니다. 다음과 같은 명령어를 사용하여 Next.js 애플리케이션을 실행할 수 있습니다.

npm run dev

서버가 시작되면 브라우저에서 http://localhost:3000/api/users를 열어 API 엔드포인트를 테스트할 수 있습니다. 이때, 위에서 작성한 users.js 파일의 경로와 일치해야합니다. 만약 모든 것이 올바르게 설정되었다면, 사용자 데이터를 응답으로 받을 수 있을 것입니다.

4. 추가 구성 및 사용

API 엔드포인트를 더 많이 작성하길 원한다면, api 디렉토리 내에 추가 파일을 만들거나 기존 파일에 추가 코드를 작성할 수 있습니다. Next.js는 이 디렉토리 내의 모든 파일을 자동으로 API 엔드포인트로 인식합니다.

API 엔드포인트에서는 데이터베이스 연결, 외부 서비스 호출 등 다양한 작업을 수행할 수 있습니다. 필요에 따라 추가 구성을 하고 사용할 수 있습니다.

마무리

이제 API 엔드포인트를 작성하는 방법에 대해 알아보았습니다. Next.js에서 제공하는 빠른 개발환경과 함께 다양한 API를 작성하고 활용할 수 있습니다. Next.js 공식 문서에서 더 많은 정보를 참고하시기 바랍니다.

키워드: #Next.js #API #엔드포인트