Next.js에서 API 라우트를 사용한 서버리스 함수 생성: 사용자 인증을 위한 API 예제

Next.js는 프론트엔드와 백엔드의 경계를 허물어주는 강력한 프레임워크입니다. 이번 글에서는 Next.js의 API Routes를 사용하여 서버리스 함수를 생성하고, 사용자 인증을 위한 간단한 API 예제를 구현해보겠습니다.

API Routes란?

Next.js에서 API Routes는 파일 기반 라우팅 시스템을 통해 백엔드 로직을 구현할 수 있도록 해줍니다. 이 라우트는 서버리스 함수 형태로 동작하며, 필요에 따라 다양한 HTTP 메서드(GET, POST, PUT, DELETE 등)를 처리할 수 있습니다. 이는 서버리스 프레임워크 특유의 확장성과 성능 덕분에 매우 효율적입니다.

API Routes 생성 방법

API Route를 생성하기 위해서는 Next.js 프로젝트의 pages/api 디렉토리 아래에 파일을 추가하면 됩니다. 예를 들어, pages/api/login.js 파일을 생성해봅시다.

javascript
// pages/api/login.js
import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const { username, password } = req.body;

    // 여기서는 간단히 하드코딩된 사용자 데이터로 인증을 합니다
    if (username === 'user' && password === 'pass') {
      res.status(200).json({ success: true, message: 'Logged in successfully!' });
    } else {
      res.status(401).json({ success: false, message: 'Invalid credentials' });
    }
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

이 코드는 단순한 로그인 처리용 API를 구현합니다. POST 요청을 받아서 사용자 인증 정보를 확인한 뒤, 인증이 성공하면 성공 메시지를, 실패하면 에러 메시지를 반환합니다.

사용자 인증 API 구현하기

보다 복잡한 시나리오를 고려해 좀 더 현실적인 사용자 인증 API를 구현해봅시다. 이번에는 JWT(JSON Web Token)를 사용하여 사용자 인증을 구현합니다.

먼저 jsonwebtoken 패키지를 설치해야 합니다:

bash
npm install jsonwebtoken

그 다음으로 pages/api/login.js 파일을 다음과 같이 수정합니다:

javascript
// pages/api/login.js
import { NextApiRequest, NextApiResponse } from 'next';
import jwt from 'jsonwebtoken';

const SECRET_KEY = 'your-secret-key'; // 실제 의미 있는 비밀 키를 사용하세요

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const { username, password } = req.body;

    // 하드코딩된 사용자 데이터를 사용한 인증
    if (username === 'user' && password === 'pass') {
      const token = jwt.sign({ username }, SECRET_KEY, { expiresIn: '1h' });
      res.status(200).json({ success: true, token });
    } else {
      res.status(401).json({ success: false, message: 'Invalid credentials' });
    }
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

이 코드는 로그인 요청이 성공하면 JWT 토큰을 생성하여 클라이언트에 반환합니다. 이 토큰은 이후의 요청에서 사용자를 인증하는 데 사용될 수 있습니다.

JWT 토큰을 이용한 인증 API를 추가해봅시다. 새로운 파일 pages/api/authenticate.js를 생성하고 다음과 같이 작성합니다:

javascript
// pages/api/authenticate.js
import { NextApiRequest, NextApiResponse } from 'next';
import jwt from 'jsonwebtoken';

const SECRET_KEY = 'your-secret-key';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    const token = req.headers.authorization?.split(' ')[1]; // Bearer 토큰에서 값 추출

    if (!token) {
      res.status(401).json({ success: false, message: 'Token not provided' });
      return;
    }

    try {
      const decoded = jwt.verify(token, SECRET_KEY);
      res.status(200).json({ success: true, data: decoded });
    } catch (error) {
      res.status(401).json({ success: false, message: 'Invalid token' });
    }
  } else {
    res.setHeader('Allow', ['GET']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

이 코드에서는 HTTP 요청의 헤더에서 JWT 토큰을 받아 이를 검증합니다. 토큰이 유효하지 않으면 에러 메시지를 반환하고, 유효하다면 토큰에서 디코딩된 정보를 반환합니다.

결론

Next.js의 API Routes를 사용하면 프론트엔드와 백엔드의 경계를 뛰어넘어 유연하게 서버리스 애플리케이션을 구축할 수 있습니다. 이번 예제에서는 기본적인 사용자 인증 시스템을 구현해봤습니다. 실제 프로젝트에서는 데이터베이스 연동, 암호화 처리, 세션 관리 등의 추가 기능을 고려해야 합니다. Next.js의 고유한 특성을 잘 활용하여 효과적인 웹 애플리케이션을 개발해보세요.