[NEXT.JS] 환경변수 설정

소개

Next.js는 환경 변수를 사용하여 애플리케이션의 설정값을 관리할 수 있습니다. 이 가이드는 Next.js에서 환경 변수를 설정하고 사용하는 방법을 설명합니다.

 

 

파일 생성

프로젝트 루트 디렉토리에 .env.local 파일을 생성하고 환경 변수를 추가합니다.

NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_API_KEY=your_api_key

 

NEXT_PUBLIC_로 시작하는 환경 변수는 클라이언트 사이드에서 사용할 수 있습니다.

 

 

환경변수 사용

pages/index.js 파일을 수정하여 환경 변수를 사용합니다.

import { useEffect, useState } from 'react';

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/data?key=${process.env.NEXT_PUBLIC_API_KEY}`);
      const result = await response.json();
      setData(result);
    };
    fetchData();
  }, []);

  return (
    <div>
      <h1>Environment Variables in Next.js</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

 

 

문의사항이나 피드백은 댓글로 남겨주세요.