[Next.js] api 변경이 적용되지 않는다

련지·2024년 7월 12일

Next.js

목록 보기
1/3

댓글을 작성하는 POST 메서드 내용을 변경했는데 계속 반영되지 않았다.
심지어 간단한 console.log() 도 되지 않았다...
검색을 해도 나오질 않아서 원인을 찾다가 문득 생각이 든 것이 API 호출의 BASE_URL !

내가 API를 호출하고 있던 방식은 이렇다

app/util/fetch.ts

"use server";

type Request = {
  method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
  url: string;
  data?: object;
  cache:
    | "no-cache"
    | "no-store"
    | "reload"
    | "force-cache"
    | "only-if-cached"
    | "default";
};

export async function $Fetch({ method, url, data, cache }: Request) {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/${url}`, {
      method,
      cache: cache,
      body: JSON.stringify(data),
    });

    const json = await res.json();
    switch (json.status) {
      case 200:
        break;
      case 500:
        console.log(url, "서버 오류 발생");
        break;
    }
    return json;
  } catch (e) {
    console.log("Fetch Error : ", e);
    throw e;
  }
}

fetch는 axios와 달리 BASE_URL 설정이 안 되는 게 귀찮아서 util 파일을 하나 만들었다.
NEXT_PUBLIC_BASE_URL 은 환경 변수 파일에 있는 변수명이고, 호출할 API endpoint의 마지막 부분만 넘겨주면 되는 형식이다.

그런데 이 BASE_URL 을 배포 버전으로 해놔서 로컬 변경 사항이 적용되지 않았던 것이었다.

이렇게 두 개를 만들어놓고 로컬 테스트 시에는 아래 것을 쓰면 된다.
어차피 배포할 때는 배포용 환경 변수 파일에 위의 것이 저장 되어 있어서 무관하다.

profile
기술 블로그도 재미있을 수 있잖아요

0개의 댓글