Next.js 환경변수와 API 호출 코드 정리하기 | .env와 fetchApi

1. API 주소를 환경변수로 관리하기

기존에는 API를 호출할 때 서버 주소를 직접 작성했다.

fetch(`http://localhost:8080/api/v1/posts/${id}`)

하지만 개발 환경과 실제 배포 환경에서는 API 서버의 주소가 달라질 수 있다.

따라서 API 서버 주소를 코드에 직접 작성하기보다 환경변수로 분리하는 것이 좋다.

 

2. .env 파일 사용하기

프로젝트의 루트에 .env 파일을 생성한다.

NEXT_PUBLIC_API_BASE_URL=http://localhost:8080

이렇게 API 서버의 기본 주소를 환경변수로 저장할 수 있다.

Next.js에서는 브라우저에서 사용할 환경변수에 NEXT_PUBLIC_ 접두사를 붙여야 한다.

그리고 코드에서는 다음과 같이 사용할 수 있다.

process.env.NEXT_PUBLIC_API_BASE_URL

따라서 기존 코드를 다음과 같이 변경할 수 있다.

fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/posts/${id}`)

이렇게 하면 API 서버 주소가 변경되더라도 코드를 일일이 수정할 필요 없이 환경변수만 변경하면 된다.

3. .env 파일은 Git에 올리지 않기

환경변수 파일에는 서버 주소뿐만 아니라 API 키나 비밀번호처럼 외부에 공개하면 안 되는 정보가 들어갈 수도 있다.

따라서 .env 파일은 Git에 커밋하지 않도록 .gitignore에 추가하는 것이 좋다.

.env

프로젝트마다 이미 .env가 .gitignore에 포함되어 있는 경우도 있으므로 확인하는 것이 좋다.

4. API 호출 코드 분리하기

API를 호출하는 코드가 여러 페이지에 반복되면 다음과 같은 코드가 계속 작성될 수 있다.

fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/posts/${id}`)
    .then((res) => res.json())
    .then((data) => {
        setPost(data);
    });

 

API를 호출할 때마다 fetch(), URL, res.json() 등을 반복해서 작성해야 하기 때문에 코드가 길어지고 중복도 발생한다.

이러한 반복 코드를 별도의 함수로 분리할 수 있다.

예를 들어 fetchApi라는 함수를 만들 수 있다.

fetchApi를 다른 파일에서도 사용하려면 export를 사용한다. 다른 파일에서는 import해서 사용할 수 있다.

export function fetchApi(url: string) {
    return fetch(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}${url}`
    ).then((res) => res.json());
}

그러면 실제 페이지에서는 다음과 같이 간단하게 사용할 수 있다.

fetchApi(`/api/v1/posts/${id}`)
    .then(setPost);

 

API 호출과 관련된 반복적인 코드를 한 곳에서 관리할 수 있게 된 것이다.

6. API 호출 코드 분리의 장점

API 호출 함수를 분리하면 다음과 같은 장점이 있다.

• API 기본 주소를 한 곳에서 관리할 수 있다.
• 반복되는 fetch() 코드를 줄일 수 있다.
• res.json()과 같은 공통 처리도 한 곳에서 관리할 수 있다.
• 여러 페이지에서 동일한 함수를 재사용할 수 있다.
• API 호출 방식이 변경되었을 때 수정할 곳이 줄어든다.

특히 프로젝트가 커질수록 API 호출 코드가 여러 곳에 흩어지는 것을 방지하는 데 도움이 된다.