[Nextjs] API Routes

김채운·2024년 10월 23일

Next.js

목록 보기

11/25

Next.js는 API Routes라는 기능을 제공하여, 클라이언트(브라우저)에서 요청을 받아 데이터를 처리하는 간단한 API 서버를 구축할 수 있다. 이번 포스트에서는 Next.js에서 API Routes를 설정하고 사용하는 방법에 대해 알아보자.

1. API Routes란?

API Routes는 Next.js에서 API 서버를 간단하게 만들 수 있도록 도와주는 기능이다. 이를 사용하면 백엔드 API 서버와 유사하게 동작하는 API를 쉽게 구축할 수 있다. 예를 들어, 클라이언트로부터 요청을 받아 데이터베이스에서 데이터를 가져오거나, 외부 API의 데이터를 불러와 클라이언트에 전달할 수 있다.

2. API Routes 설정하기

2-1. 기본 폴더 구조

Next.js 프로젝트를 생성할 때, 기본적으로 src/pages/api 폴더가 생성된다. 이 폴더는 API를 정의하는 파일들을 저장하는 곳으로, 이 안에 배치된 파일들은 모두 API Routes로 인식된다

예를 들어, src/pages/api/hello.ts 파일을 확인해 보면, 기본적인 API 응답 코드가 작성되어 있다.

import type {NextApiRequest, NextApiResponse} from "next";

type Data = {
  message: string;
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>,
) {
  res.status(200).json({ message: 'Hello from Next.js!' });
}

2-2. API 경로와 응답 처리

위 코드에서 handler 함수는 API 요청에 대한 응답을 정의하는 함수이다. 두 개의 매개변수 req와 res를 받아 요청과 응답을 처리할 수 있다. 여기서 res.status(200).json({ name: 'John Doe' })는 상태 코드 200을 반환하며, 응답으로 { name: 'John Doe' }라는 JSON 데이터를 전달한다.

이 파일은 웹페이지가 아닌 API 경로로 인식되며, 브라우저에서 localhost:3000/api/hello로 요청을 보내면 API가 응답하게 된다.

handler 함수는 NextApiRequest와 NextApiResponse 타입을 사용하여 요청과 응답을 처리한다. 이때 res 객체의 json 메서드를 통해 JSON 형식의 데이터를 응답하며, status 메서드를 사용해 HTTP 상태 코드를 설정할 수 있다.
이 코드는 상태 코드 200(성공)을 반환하며, 응답으로 { name: 'John Doe' } 객체를 클라이언트에게 전달한다.

3. 현재 시간을 반환하는 API 만들기

3-1. API Routes 기본 설정

Next.js에서는 API Routes를 이용해 간단하게 API를 설정할 수 있다. 먼저 pages/api 폴더 아래에 time.ts 파일을 생성하여 현재 시간을 반환하는 API를 만들어보자.

import type {NextApiRequest, NextApiResponse} from "next";
// Next에서 기본으로 제공하는 자체 타입.

type Data = {
  name: string;
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>,
) {
  const date = new Date();
  res.json({time: date.toLocaleString()});
}

이렇게 코드를 작성하면 이 time이라는 api가 호출되면, 이 handler함수가 실행이 될텐데 이 함수에서는 새로운 Date객체를 만들고, 응답 값으로 이러한 JSON객체를 응답하도록 설정이 되었으니까

{
  "time": "2023-10-23 14:35:12"
}

응답 객체 안에 time이라는 속성으로 현재 시간이 로컬 형식으로 잘 반환된 것을 확인할 수 있다.

4. 결론

Next.js의 API Routes는 서버리스 함수처럼 동작하며, 별도의 백엔드 설정 없이도 API 서버를 간편하게 구축할 수 있는 기능이다. 데이터베이스 연결, 외부 API 호출, 데이터 처리 등 다양한 작업을 클라이언트와 서버 간의 요청-응답 흐름 안에서 처리할 수 있다.

API Routes는 Next.js에서 백엔드 API 서버처럼 동작하는 간단한 API를 구축할 수 있는 기능.
pages/api 폴더에 파일을 추가하면, 해당 파일은 API 경로로 자동 설정됨.
요청과 응답을 처리하는 함수인 handler는 Next.js의 NextApiRequest와 NextApiResponse를 사용해 동작한다.

✔️ Next.js에서 서버리스 함수의 의미

서버리스 함수란, 전통적인 서버 인프라 관리 없이 클라우드 환경에서 동적으로 실행되는 함수를 의미한다. 이러한 함수는 서버리스 아키텍처의 일부로, 서버를 직접 관리할 필요 없이 특정 요청에 따라 자동으로 함수가 실행되며, 그 후에 자동으로 종료된다.

Next.js의 API Routes는 이러한 서버리스 함수처럼 동작한다. 즉, 특정 API 요청이 들어오면 Next.js는 이 요청을 처리하는 함수 handler를 실행하고, 요청을 처리한 후 자동으로 종료된다. 이를 통해 데이터베이스 연결, 외부 API 호출, 데이터 처리 등을 수행할 수 있다. 클라우드 환경(Vercel, AWS 등)에서는 API Routes가 이러한 서버리스 함수로 배포되어, 서버 관리 없이 백엔드 로직을 처리할 수 있게 된다.

API Routes 출처,