본문으로 건너뛰기

231123

서버환경과 클라이언트 환경 BaseURL

Next.js에서 클라이언트와 서버를 모두 구현할 경우 헷갈리는 경우가 발생한다
특히, baseUrl이 가장 헷갈린다.

// api폴더
fetch("/api/login", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ email, password }),
});

api폴더내에서 다음과 같이 작성하면 어떻게 될까?
BaseURL을 생략함므로써, 원하는대로 동작하지 않을 가능성이 농후하다.
즉, 서버 환경이라면 baseURL을 작성해주어야한다.

반대로 클라이언트 환경에서는 baseURL을 작성하지 않아도 된다.

// app폴더
fetch("/api/login", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ email, password }),
});

동일하게 작성했지만 이 경우에는 baseURL을 작성하지 않아도 된다.
원하는 BaseUrl이 알아서 지정된다.

하지만 헷갈리는 경우를 대비하기 위해 나는 BaseURL을 작성해주는 것을 선호하게 됐다.
즉 정리해보면 다음과 같다.

// api폴더
fetch(`${process.env.SERVER_BASE_URL}`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ email, password }),
});

// api폴더
fetch(`${process.env.NEXT_PUBLIC_CLIENT_BASE_URL}`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ email, password }),
});

서버환경에서는 NEXT_PUBLIC를 작성하지 않아도 되지만, client 환경이라면 NEXT_PUBLIC를 꼭 붙여줘야한다.
붙이지 않고 client에서 CLIENT_BASE_URL만 사용한다면, network에서 undefined를 만나게되고, 에러가 발생한다.

참고자료

How to set base URL based on environment variable in Next.js?

서버환경과 클라이언트 환경 BaseURL
참고자료