Published on

6단계: API Routes와 백엔드 기능 추가

API Routes와 백엔드 기능 추가

Next.js는 프론트엔드 프레임워크이지만, /pages/api 디렉토리를 통해 서버리스 API도 제공할 수 있습니다.
이 API Routes 기능을 사용하면 Express 없이도 간단한 백엔드 기능을 구현할 수 있습니다.

6-1. API Routes란?

  • pages/api/ 폴더에 파일을 만들면 → 그 자체가 API Endpoint
  • Node.js 런타임에서 실행되며, Express처럼 req, res 객체 제공
  • 기본 HTTP 메서드(GET, POST 등) 처리 가능

6-2. API 라우트 기본 예시

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: '안녕하세요!' });
}
  • /api/hello 요청 시 JSON 응답 제공

6-3. HTTP 메서드 처리

// pages/api/user.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ user: 'hy' });
  } else if (req.method === 'POST') {
    const body = req.body;
    res.status(201).json({ received: body });
  } else {
    res.status(405).end(); // Method Not Allowed
  }
}
  • req.method로 요청 메서드를 구분
  • JSON body는 자동으로 파싱됨

6-4. 클라이언트에서 API 호출

useEffect(() => {
  fetch('/api/hello')
    .then(res => res.json())
    .then(console.log);
}, []);
  • API 경로는 같은 도메인 기준으로 상대경로 사용 가능

6-5. 환경변수와 보안 처리

.env.local에 비밀 값을 저장하고 사용합니다:

API_KEY=my-secret-key

const key = process.env.API_KEY;
  • .env.local은 Git에 커밋하지 않도록 .gitignore에 포함되어야 합니다

6-6. API Routes를 실제 서비스에 쓸 수 있을까?

  • 인증, CRUD, 외부 API 프록시 등에는 적합
  • DB 연동도 가능하지만, 서버리스 특성상 상태 유지가 어렵기 때문에 별도 서버 또는 Lambda와 병행 추천

요약

  • /pages/api 디렉토리의 파일이 API Endpoint가 된다
  • Express 없이도 req, res로 직접 요청을 처리할 수 있다
  • fetch()로 클라이언트에서 호출 가능하며, 환경변수는 .env.local에 설정
  • 실무에서도 간단한 API 서버로 충분히 활용 가능하다

심화학습

Q1. Next.js API Routes를 DB와 직접 연결할 수 있을까? 보안상 어떤 점을 주의해야 할까?

A: 가능하다. Prisma 등 ORM을 활용해 DB 연동이 가능하지만, API 라우트에 민감 정보가 노출되지 않도록 CORS, 인증, 입력 검증을 철저히 해야 한다.

Q2. POST 요청에서 body가 잘못되었을 때 어떻게 예외 처리를 해야 안정적인 API가 될까?

A: 필수 필드 확인, 타입 검증 등을 통해 400 Bad Request를 명확히 응답하고, 예외 발생 시에도 500 내부 에러가 되지 않도록 try-catch 구조를 도입해야 한다.

Q3. API Routes를 확장해서 인증 시스템(로그인/회원가입)을 만들려면 어떤 구조로 설계해야 할까?

A: /api/auth/login, /api/auth/signup 등 엔드포인트를 나누고, JWT 또는 세션 기반 인증 토큰 발급 및 저장, 미들웨어를 통한 보호 라우트 설계가 필요하다.