NEXT, VITE 환경변수

 Next.js에서 환경변수 설정 및 사용

 

1. 환경변수 파일 생성

Next.js에서는 .env.local, .env.development, .env.production 등의 파일을 사용합니다.

 

📌 주의: .env.local 파일은 .gitignore에 자동으로 포함되어 Git에 푸시되지 않습니다.

 

NEXT_PUBLIC_API_URL=https://api.example.com
SECRET_KEY=super-secret-key

---

 2. 환경변수 사용

 

Next.js에서는 NEXT_PUBLIC_ 접두사가 붙은 변수만 클라이언트(브라우저)에서 접근 가능합니다.

 

1) 클라이언트에서 사용

export default function Home() {
  return (
    <div>
      <p>API URL: {process.env.NEXT_PUBLIC_API_URL}</p>
    </div>
  );
}

 

2) 서버에서 사용

🚨 SECRET_KEY 같은 민감한 정보는 클라이언트에서 직접 접근할 수 없습니다.

export default function handler(req, res) {
  res.json({ secret: process.env.SECRET_KEY });
}

 

 

 

---

3. 환경변수 자동 완성 추가

 

next.config.js에서 환경변수를 명시적으로 선언하면, TypeScript에서 자동 완성 지원을 받을 수 있습니다.

// next.config.js
module.exports = {
  env: {
    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
  },
};

 

 

---

 

 

 

 Vite에서 환경변수 설정 및 사용

 1. 환경변수 파일 생성

Vite에서는 .env, .env.development, .env.production 파일을 사용할 수 있습니다.

VITE_API_URL=https://api.example.com
SECRET_KEY=super-secret-key

 

📌 주의: Vite는 모든 환경변수에 VITE_ 접두사를 붙여야 클라이언트에서 사용할 수 있습니다.

 

---

 2. 환경변수 사용

 

Vite의 환경변수는 import.meta.env 객체를 통해 접근합니다.

 

1) 클라이언트에서 사용

function App() {
  return (
    <div>
      <p>API URL: {import.meta.env.VITE_API_URL}</p>
    </div>
  );
}

export default App;

 

2) 서버에서 사용

 

console.log(process.env.SECRET_KEY);

 

---

 

 3. 환경변수 자동 완성 추가

 

Vite에서 import.meta.env를 TypeScript에서 자동 완성되도록 설정하려면 vite-env.d.ts 파일을 추가합니다.

// vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}