🚀 Next.js로 API 만들기: 쉽고 깔끔한 백엔드 구축법 💡

🚀 Next.js로 API 만들기: 쉽고 깔끔한 백엔드 구축법 💡

 

Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)에 강점을 가진 React 프레임워크로 널리 알려져 있지만, 사실 API 구축에도 놀라운 능력을 자랑합니다. 🎉

 

Next.js를 사용하면 복잡한 서버 설정 없이도 백엔드 API를 쉽게 만들 수 있습니다. 오늘은 Next.js로 API를 만드는 방법을 기초부터 실무 활용까지 꽉꽉 눌러 담아 알아보겠습니다! 🧳

 

🌟 Next.js API의 기본 구조

 

Next.js에서는 API를 위한 별도의 서버를 설정할 필요가 없습니다. /pages/api 폴더에 파일을 추가하면 해당 파일이 곧 API 엔드포인트로 동작합니다.

 

🗂️ 폴더 구조

 

my-next-app/

├── pages/

│   ├── api/

│   │   ├── hello.js       // 기본 API 파일

│   │   ├── users.js       // 사용자 데이터 API

│   │   ├── posts/

│   │   │   ├── index.js   // 게시물 목록 API

│   │   │   ├── [id].js    // 특정 게시물 API

 

• **/pages/api/hello.js**는 http://localhost:3000/api/hello로 접근할 수 있는 API가 됩니다.

 

🔧 API 기본 코드

 

Hello API 만들기

 

/pages/api/hello.js 파일을 만들어 간단한 응답을 보내는 API를 작성해봅시다.

 

// pages/api/hello.js

export default function handler(req, res) {

  res.status(200).json({ message: "Hello, Next.js API!" });

}

 

• req: 클라이언트 요청 객체.

• res: 서버 응답 객체.

 

👉 이 API는 다음과 같은 JSON 응답을 반환합니다:

 

{

  "message": "Hello, Next.js API!"

}

 

🌐 HTTP 메서드 다루기

 

Next.js API는 GET, POST, PUT, DELETE 등 다양한 HTTP 메서드를 처리할 수 있습니다.

 

Users API

 

/pages/api/users.js를 생성하여 다양한 메서드를 처리하는 API를 만들어봅시다.

 

export default function handler(req, res) {

  const { method } = req;

 

  switch (method) {

    case "GET":

      res.status(200).json({ users: ["Alice", "Bob", "Charlie"] });

      break;

 

    case "POST":

      const { name } = req.body;

      res.status(201).json({ message: `User ${name} created!` });

      break;

 

    default:

      res.setHeader("Allow", ["GET", "POST"]);

      res.status(405).end(`Method ${method} Not Allowed`);

  }

}

 

요청 및 응답 예시

1. GET 요청:

• URL: http://localhost:3000/api/users

• 응답:

 

{

  "users": ["Alice", "Bob", "Charlie"]

}

 

 

2. POST 요청:

• URL: http://localhost:3000/api/users

• Body: { "name": "Dave" }

• 응답:

 

{

  "message": "User Dave created!"

}

 

🛠️ 동적 라우팅과 파라미터 처리

 

Next.js API에서는 파일명으로 동적 라우팅을 구현할 수 있습니다.

 

게시물 API

 

/pages/api/posts/[id].js를 생성하여 특정 게시물 데이터를 반환하는 API를 만들어봅시다.

 

export default function handler(req, res) {

  const { id } = req.query;

 

  if (req.method === "GET") {

    res.status(200).json({ postId: id, content: `Content of post ${id}` });

  } else {

    res.setHeader("Allow", ["GET"]);

    res.status(405).end(`Method ${req.method} Not Allowed`);

  }

}

 

요청 및 응답 예시

1. GET 요청:

• URL: http://localhost:3000/api/posts/123

• 응답:

 

{

  "postId": "123",

  "content": "Content of post 123"

}

 

🔒 API 보안: 환경 변수와 인증 처리

 

환경 변수 사용

 

Next.js에서는 **process.env**를 사용해 민감한 정보를 관리할 수 있습니다.

1. 환경 변수 설정

.env.local 파일 생성:

 

API_KEY=your-secret-api-key

 

 

2. API에서 사용

 

export default function handler(req, res) {

  const apiKey = process.env.API_KEY;

  res.status(200).json({ apiKey });

}

 

JWT 인증 처리

 

간단한 JWT 인증을 API에 추가해보겠습니다.

 

import jwt from "jsonwebtoken";

 

export default function handler(req, res) {

  const { authorization } = req.headers;

 

  if (!authorization) {

    return res.status(401).json({ error: "No token provided" });

  }

 

  try {

    const token = authorization.split(" ")[1];

    const decoded = jwt.verify(token, process.env.JWT_SECRET);

    res.status(200).json({ message: "Authenticated!", user: decoded });

  } catch (err) {

    res.status(401).json({ error: "Invalid token" });

  }

}

 

⚡ 실무 활용 예시: 클라이언트에서 API 호출하기

 

API 호출 코드 (React 컴포넌트)

 

import { useEffect, useState } from "react";

 

export default function Users() {

  const [users, setUsers] = useState([]);

 

  useEffect(() => {

    fetch("/api/users")

      .then((res) => res.json())

      .then((data) => setUsers(data.users));

  }, []);

 

  return (

    <ul>

      {users.map((user, index) => (

        <li key={index}>{user}</li>

      ))}

    </ul>

  );

}

 

🌟 Next.js API의 장점

1. 설정 간소화: 별도의 서버 설정 없이 API를 작성할 수 있습니다.

2. 폴더 기반 라우팅: 디렉토리 구조로 라우트를 직관적으로 관리.

3. SSR과 통합: API와 서버 렌더링을 자연스럽게 결합 가능.

4. 환경 변수 지원: 민감한 데이터를 안전하게 관리.

5. 무한 확장 가능: 간단한 프로젝트부터 복잡한 백엔드까지 대응 가능.

 

🎉 마무리

 

Next.js의 API는 백엔드 설정의 복잡함 없이 강력한 기능을 제공합니다. 프론트엔드 개발자가 백엔드 로직까지 다룰 수 있는 시대, 이제 Next.js로 시작해보세요! 🚀

 

🌷전설의 개발자가 되어봅시당!🌷