$ npx create-next-app@latest .

환경 변수가 필요한 이유

환경 변수가 필요한 이유는 우리가 웹 애플리케이션을 만들 때 개발 모드(development mode)와 배포 모드(production mode)에 따라 다르게 코딩해야 하기 때문입니다.

보통 회사의 서버에는 개발 서버가 따로 있고 배포 서버가 따로 있습니다.

이럴 경우 다른 API Url 또는 비밀 키를 사용해야 할 경우가 있습니다.

예를 들어, 개발 중에는 development-api.company.com라는 Url을 사용하고,

라이브로 배포할 때는 api.company.com 을 사용해야 할 때입니다.

또 다른 예는 개발 및 테스트 중에 실제 결제 구현을 하지 않도록 테스트 API 키를 사용하려고 할 때입니다.

NextJS에서 환경 변수를 어떻게 사용합니까?

단순하게 NextJS 프로젝트 최상단 폴더에서 .env 파일을 만들면 됩니다.

이 파일 내에서 우리는 다음과 같이 환경 변수를 선언할 수 있습니다.

NEXT_PUBLIC_API_URL = "https://development-api.company.com"
PAYMENT_KEY = "*************"

그런 다음 process.env.VARIABLE_NAME 을 사용하여 .env 파일에서 정의한 변수를 참조할 수 있습니다.

예를 들어, axios를 사용하여 API에 GET 요청을 한다면 다음과 같이 사용하면 됩니다.

axios.get(`${process.env.NEXT_PUBLIC_API_URL}/customers`);

NEXT_PUBLIC은 무슨 뜻인가요?

NextJS 애플리케이션에는 두 부분이 있다는 것을 아셔야 하는데요.

하나는 React 컴포넌트를 사용하여 빌드되고 클라이언트에게만 보여지는 React UI 부분입니다.

다른 하나는, NextJS 애플리케이션으로 서버에서 실행되는 겁니다.

즉, 다음과 같은 작업이 NextJS 애플리케이션의 서버 실행에 해당됩니다.

• /pages/api (라우팅할 때)
• getServerSideProps() (서버사이드 props를 가져올때)
• getStaticProps() (빌드시 한번만 props를 가져올때)

이 세 가지 기능은 항상 서버에서 실행되므로 NodeJS의 프로세스(process)에 액세스할 수 있습니다. 

이 데이터는 클라이언트에 직접 전송되지 않으므로 결제정보 같은 민감한 값을 사용해도 안전할 수 있는거죠.

반면에 클라이언트로 전송되는 데이터는 쉽게 노출될 수 있으므로 민감한 값을 클라이언트에 전송하는 것은 위험합니다.

이러한 이유로 NextJS는 NEXT_PUBLIC_ 이라는 접두사를 사용하지 않는 한 클라이언트 코드에서 환경 변수에 액세스하는 것을 허용하지 않습니다.

즉, React 컴포넌트에서 액세스해야 하는 환경 변수가 있는 경우 NEXT_PUBLIC_ 라는 접두사를 사용하시면 되고,

서버 측에서만 사용해야 하는 변수가 있는 경우  NEXT_PUBLIC_ 같은 접두사를 붙히지 않으면 됩니다.

.env 파일을 github에 올려도 될까요?

.env 파일은 민감한 정보를 가지고 있기 때문에 우리가 github에 push할때는 빼는게 좋습니다.

그래서 가장 좋은 방법은 .env.example 이름으로 필요한 환경 변수가 템플릿 형태로 있는 파일로 만드는 것이 중요합니다.

서버에 배포하거나 다른 개발자가 git clone 해서 사용할 때 .env.example 파일을 적당하게 수정하여 앱을 실행하는 데 필요한 모든 환경 변수를 채울 수 있습니다.

.env 파일에는 일반적으로 비밀 키(SECRET_KEY)와 토큰(TOKEN) 같은 중요한 데이터가 포함되어 있습니다. 

이러한 이유로 git 에 포함하지 않는 것이 좋습니다.

.gitignore 파일에 .env 문구를 꼭 추가해야 합니다.

주의 사항

.env 환경 변수를 수정했을 경우 꼭 다음 주의사항을 유념해야 합니다.

• .env 파일을 변경했으면 NextJS 개발 서버를 다시 시작해야 합니다.
• React 구성 요소에서 사용되는 모든 환경 변수에  NEXT_PUBLIC_ 접두사가 붙는지 확인하십시오.
• Netlify 또는 Vercel에 배포하는 경우 앱 설정 대시보드를 통해 환경 변수를 입력해야 합니다

출처 : https://cpro95.tistory.com/464

예)

import { useEffect, useState } from 'react'

export default function Fetch() {

    const [user, setUser] = useState({ name: null });

    useEffect(() => {
        fetch(process.env.NEXT_PUBLIC_API_URL + "api/hello")
            .then(res => res.json()).then(data => setUser(data));
    })

    console.log(user);
    return (
        <div>
            {user.name}

        </div>
    )
}