Next.js 공통 API 호출 로직 관리 - api.js

Next.js에서 공통 API 호출 로직을 관리하기 위해 api.js 파일을 작성하는 방법을 설명드릴게요. 이렇게 하면 코드의 일관성을 유지하고, 각 컴포넌트에서 API 호출을 쉽게 재사용할 수 있습니다.

Step 1. api.js 파일 생성

프로젝트의 적절한 위치, 예를 들어 lib 폴더 아래에 api.js 파일을 만들어줍니다.

|-- your-nextjs-project
    |-- lib
        |-- api.js

Step 2. api.js 파일에서 API 호출 함수 정의

API 요청마다 중복되는 헤더 설정, 에러 처리 등을 한 곳에서 관리할 수 있습니다. 이를 위해, fetch 함수를 래핑하여 재사용 가능한 함수로 정의해보겠습니다.

// lib/api.js
const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL;

async function fetcher(url, options = {}) {
  const res = await fetch(`${BASE_URL}${url}`, {
    headers: {
      'Content-Type': 'application/json',
      ...options.headers,
    },
    ...options,
  });

  if (!res.ok) {
    const error = new Error('An error occurred while fetching the data.');
    error.info = await res.json();
    error.status = res.status;
    throw error;
  }

  return res.json();
}

// 예시 API 호출 함수
export const getUser = async (userId) => {
  return fetcher(`/users/${userId}`);
};

export const updateUser = async (userId, userData) => {
  return fetcher(`/users/${userId}`, {
    method: 'PUT',
    body: JSON.stringify(userData),
  });
};

export const deleteUser = async (userId) => {
  return fetcher(`/users/${userId}`, {
    method: 'DELETE',
  });
};

Step 3. 컴포넌트에서 api.js 함수 사용하기

컴포넌트 파일에서 api.js에 정의된 함수를 import하여 호출합니다. 예를 들어, 사용자 정보를 가져오는 컴포넌트는 다음과 같이 작성할 수 있습니다.

// pages/user/[id].js
import { useEffect, useState } from 'react';
import { getUser } from '../lib/api';

export default function UserPage({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    getUser(userId)
      .then((data) => setUser(data))
      .catch((error) => console.error(error));
  }, [userId]);

  if (!user) return <p>Loading...</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

추가 고려사항

• Error Handling: API 호출 시 발생할 수 있는 에러를 컴포넌트에서 개별 처리하거나, api.js에서 기본적인 에러 처리를 수행하도록 할 수 있습니다.
• Authentication: JWT 토큰 등의 인증이 필요하다면 fetcher 함수 내에서 토큰을 헤더에 포함시키도록 추가합니다.
• 환경 변수 관리: BASE_URL은 .env.local 파일을 통해 설정하여, 로컬/개발/배포 환경에서 다른 API 엔드포인트를 설정할 수 있습니다.

이런 방식으로 api.js에 공통 API 호출 로직을 작성하면, API와 상호작용하는 코드가 중앙에서 관리되므로 유지보수가 용이해지고, 각 컴포넌트에서 코드 중복을 줄일 수 있습니다.