Next.js에서 .env 파일에 환경 변수를 등록 할 때 주의할 점이 있다.

서버 측 코드는 그냥 써도 되지만, 클라이언트 측에 사용되는 경우라면 반드시 접두사가 필요하다.

NEXT_PUBLIC_

위를 통해 Next.js가 서버와 클라이언트 환경 변수를 명확히 구분할 수 있다.

또한, API key나 비밀번호 등 민감한 정보는 따로 서버 전용으로 분리하여 보안을 강화할 수 있다.

사용 예

const response = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/book`)

사용 예 2

export function Page({ searchParams }: { searchParams: { q? : string }}) {
	const response = await fetch(                        // 현재 페이지의 query string
		`${process.env.NEXT_PUBLIC_SERVER_URL}/book/search?q=${searchParams.q}`
		)
		
	if (!response.ok) {
		return <div>오류가 발생했습니다.</div>
	}
	
	const bookData = await response.json();
}

만일 접두사를 작성하지 않았다면?

자동으로 서버 측 환경변수로 인식하므로 Client Component에서는 해당 데이터에 접근할 수 없다.