Next13) .env.local 변수 오류

1. 클라이언트 컴포넌트

.env.local의 변수는 기본적으로 Node.js 환경에서 가능하다. 즉, 클라이언트 사이드에서는 env 변수에 접근할 수 없다. 단, NEXT_PUBLIC_을 변수 앞에 붙여준다면 클라이언트에서도 env 변수를 사용할 수 있다. NEXT_PUBLIC_이 하드코드된 변수들은 빌드타임때 인라인 처리되어 JS번들에 포함되는 방식이기 때문이다.

const varName = 'NEXT_PUBLIC_ANALYTICS_ID'
setupAnalyticsService(process.env[varName])

https://nextjs.org/docs/app/building-your-application/configuring/environment-variables

따라서 이와 같이 다른 변수와 함께 사용하면 인라인 처리될 수 없기 때문에 NEXT_PUBLIC_변수들은 다른 변수와 혼용해서 사용할 수 없다.

2. 타입스크립트

const url = process.env.SKILL_URL;
const skills = await basicFetch<Skill[]>(url);
  
Argument of type 'string | undefined' is not assignable to parameter of type 'string'.

env의 모든 변수는 string으로 작성되어야 한다. 이거를 타입스크립트도 알고 있다.
하지만 코드가 실행될때 env 변수값이 없을 수도 있다는 가능성으로 인해 'string | undefined' 오류를 낸다.

1) 오류 처리

//Skill.tsx
  const skills = await basicFetch<Skill[]>("SKILL_URL");

//fetchFuction.ts
  const endpoint = process.env[env_var];

  if (endpoint === undefined) throw new Error('Endpoint error')

  const response = await fetch(endpoint, {
    headers: headers
  });

오류처리는 어디서든 할 수 있겠지만 나는 env변수를 "변수이름"으로 넘겨주고 페치 파일에서 endpoint를 설정해주었다. 이때 endpoint가 undefined일 때 에러를 띄워주고, 아닐때 response를 가져온다. 해당방법은 앞서 말했듯이 변수를 이용하여 env를 가져오기때문에 클라이언트에서는 사용할 수가 없겠다.

2) 타입 선언

  const url = process.env.SKILL_URL as string;
  const skills = await basicFetch<Skill[]>(url);

간단하게 한다면 그냥 as string으로 타입을 선언해준다.

3) 글로벌 타입

//env.d.ts

declare namespace NodeJS {
  export interface ProcessEnv {
    SKILL_URL: string;
    [key:string]: string;
  }
}

NodeJs모듈의 인터페이스 ProcessEnv으로 변수 타입을 정의해준다.
전체변수 또는 개별로 정의해 줄 수 있다.
잊지 말고 tsconfig에 해당파일을 포함시켜준다.

하지만 이렇게 타입을 정의해 주더라도 오류처리를 해주어야 안전하겠다.

참고
https://conermurphy.com/blog/fixing-undefined-environment-variable-type-issues-typescript