환경변수 브라우저 접근 오류

다음 코드에서 버그를 찾으세요:

JAVASCRIPT

// .env.local
// SECRET_API_KEY=abc123

// app/page.js
'use client';

export default function Home() {
    const apiKey = process.env.SECRET_API_KEY;
    return <p>API Key: {apiKey}</p>;
}

답변

환경변수는 getServerSideProps에서만 접근 가능함 process.env 대신 import.meta.env를 사용해야 함 클라이언트에서 접근하려면 환경변수 이름이 NEXT_PUBLIC_ 접두사로 시작해야 함 .env.local 파일은 Next.js에서 지원하지 않음

로그인 후 제출하기