Nextjs에서 dotenv 사용해보기

안녕하세요.
이번 포스팅에서는 Nextjs에서 dotenv 사용하는 방법에 대해서 알아보겠습니다.

기본적으로 Create Next App으로 Nextjs 프로젝트를 생성시 루트에 .env 파일을 생성을 하고 안에 값을 NEXT_PUBLIC_으로 시작해서 작성을 하면 됩니다.

# .env
NEXT_PUBLIC_TEST=Hello World

위와 같이 Hello World라는 값을 가진 REACT_APP_TEST를 만든 후 console을 통해 확인을 해보겠습니다.

// index.tsx
import React from 'react';

function Home() {
  console.log('test', process.env.NEXT_PUBLIC_TEST);

  return <h1>Hello, World!</hi>
}

export default Home;

위와 같이 코드를 작성하고 실행을 하면 아래와 같이 콘솔에 Hello World가 출력되는걸 볼수 있습니다.

여기까지 부족한 글 읽어주셔서 감사합니다.
제가 잘못 작성한 내용이나 부족한 부분이 있다면 알려주시면 보완 수정하겠습니다.

감사합니다💛