Next.js에서 api.js 파일로 API 에러 핸들링 및 .env.local 파일 설정하기

관리자용 웹 애플리케이션 개발을 진행할 때, API 호출 시 발생할 수 있는 다양한 에러 상황을 처리하는 것이 중요합니다. 에러 핸들링을 통해 사용자에게 더 나은 피드백을 제공할 수 있으며, 디버깅도 훨씬 용이해집니다. 또한, 민감한 정보(예: API 키나 데이터베이스 URL)를 안전하게 관리하기 위해 .env.local 파일을 설정하는 방법도 살펴보겠습니다.

1. API 에러 핸들링: api.js 파일에서의 처리 방법

api.js 파일은 API 요청을 처리하는 중앙 파일로서, 모든 API 호출을 관리하고 에러 처리를 할 수 있는 이상적인 장소입니다. 일반적으로 다음과 같은 에러 핸들링 방식이 있습니다.

기본 예시

// api.js
export async function fetchData(url, options) {
  try {
    const response = await fetch(url, options);
    
    // 응답이 성공적이지 않은 경우, 에러 던지기
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.message || 'API 요청 실패');
    }
    
    // 성공적으로 응답이 왔을 경우
    return await response.json();
  } catch (error) {
    console.error('API 호출 중 에러 발생:', error);
    throw error;
  }
}

 

이렇게 작성하면 API 요청 중 에러가 발생하면 fetchData 함수가 에러를 콘솔에 로깅하고 호출하는 쪽에서 에러를 핸들링할 수 있도록 합니다.

사용 예시

import { fetchData } from './api';

async function loadData() {
  try {
    const data = await fetchData('/api/some-endpoint');
    console.log('Data:', data);
  } catch (error) {
    alert('데이터를 불러오는 중 에러가 발생했습니다.');
  }
}

 

이 방식은 다양한 API 호출에서 동일한 에러 핸들링 패턴을 사용하도록 하고, 공통된 에러 처리 방식을 유지하는 데 도움을 줍니다.

---

2. 환경 변수를 위한 .env.local 파일 설정하기

환경 변수는 데이터베이스 연결 문자열이나 API 키 같은 민감한 데이터를 코드와 분리하고 안전하게 보관하는 데 유용합니다. Next.js에서는 .env.local 파일을 사용하여 환경 변수를 설정할 수 있습니다.

1) .env.local 파일 생성하기

프로젝트 루트 디렉토리에 .env.local 파일을 생성합니다. 파일 이름은 반드시 .env.local이어야 하며, 이렇게 작성된 변수들은 Next.js 서버에서만 접근할 수 있습니다.

# .env.local
NEXT_PUBLIC_API_BASE_URL=https://api.example.com
SECRET_API_KEY=my-secret-key

 

2) 환경 변수 사용하기

.env.local에 정의된 변수들은 process.env를 통해 접근할 수 있습니다. 단, 클라이언트에서 접근 가능한 변수를 정의하려면 변수 이름에 NEXT_PUBLIC_을 붙여야 합니다.

예시: 환경 변수를 사용한 API 호출

// api.js
export async function fetchData(endpoint, options) {
  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
  const url = `${baseUrl}${endpoint}`;

  try {
    const response = await fetch(url, options);

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.message || 'API 요청 실패');
    }

    return await response.json();
  } catch (error) {
    console.error('API 호출 중 에러 발생:', error);
    throw error;
  }
}

 

---

결론

• API 에러 핸들링은 API 호출 중 발생하는 에러를 쉽게 디버깅할 수 있도록 도와주며, 사용자에게도 피드백을 줄 수 있도록 합니다.
• 환경 변수 설정은 보안을 위해 민감한 데이터를 코드와 분리하여 관리하고, NEXT_PUBLIC_ 접두사를 사용해 필요한 경우 클라이언트 측에서도 안전하게 사용할 수 있게 해줍니다.

.env.local 파일과 에러 핸들링을 적절히 조합하여, Next.js 애플리케이션의 안정성을 높여보세요.