Next.js에서 .env 사용하기

 

1. 프로젝트 루트에 .env 파일 생성

프로젝트 루트(예: package.json 파일이 위치한 곳)에 .env 파일을 생성합니다.
보통 민감한 정보(예: 데이터베이스 접속 정보, API 키 등)를 저장합니다.

MYSQL_HOST=localhost
MYSQL_USER=your_mysql_username
MYSQL_PASSWORD=your_mysql_password
MYSQL_DATABASE=your_database_name

주의:
클라이언트 사이드에서 사용해야 하는 변수는 반드시 NEXT_PUBLIC_ 접두사를 붙여야 합니다.
예: NEXT_PUBLIC_API_URL=https://example.com/api

---

2. Next.js가 .env 파일을 자동으로 로드

Next.js는 기본적으로 프로젝트 루트의 .env, .env.local, .env.development, .env.production 파일들을 자동으로 로드합니다.
따라서 별도의 설정 없이 process.env.VARIABLE_NAME으로 접근할 수 있습니다.

---

3. 코드에서 환경 변수 사용하기

서버 사이드 코드(예: API 라우트, 서버 액션)에서는 아래와 같이 환경 변수를 불러올 수 있습니다.

// 예: app/api/register/route.ts
"use server";

import { NextResponse } from "next/server";
import mysql from "mysql2/promise";
import { hash } from "bcryptjs";

export async function POST(request: Request) {
  const { email, password, name } = await request.json();
  if (!email || !password) {
    return NextResponse.json({ error: "필수값 누락" }, { status: 400 });
  }

  // .env 파일에 설정된 환경 변수를 사용
  const connection = await mysql.createConnection({
    host: process.env.MYSQL_HOST!,
    user: process.env.MYSQL_USER!,
    password: process.env.MYSQL_PASSWORD!,
    database: process.env.MYSQL_DATABASE!,
  });

  const hashedPassword = await hash(password, 10);
  await connection.execute(
    "INSERT INTO members (email, password, name) VALUES (?, ?, ?)",
    [email, hashedPassword, name || null]
  );
  await connection.end();

  return NextResponse.json({ message: "회원가입 성공!" }, { status: 200 });
}

Tip:
타입스크립트를 사용하는 경우, process.env.MYSQL_HOST!와 같이 느낌표(!)를 붙여 값이 반드시 존재함을 명시할 수 있습니다.

---

4. 클라이언트 사이드에서 환경 변수 사용하기

클라이언트에서 사용해야 하는 변수는 NEXT_PUBLIC_ 접두사를 붙여야 합니다.
예를 들어, .env 파일에 아래와 같이 작성합니다.

NEXT_PUBLIC_API_URL=https://example.com/api

클라이언트 코드에서는 아래와 같이 사용합니다.

"use client";

import React from "react";

export default function ExampleComponent(): JSX.Element {
  // 클라이언트 코드에서는 process.env.NEXT_PUBLIC_API_URL 사용
  console.log("API URL:", process.env.NEXT_PUBLIC_API_URL);

  return <div>API URL: {process.env.NEXT_PUBLIC_API_URL}</div>;
}

---

5. 변경 사항 적용하기

.env 파일을 수정한 후에는 Next.js 개발 서버를 재시작해야 변경 사항이 반영됩니다.

npm run dev

---

6. gitignore에 환경변수 파일 추가

민감한 정보가 포함된 환경변수 파일은 Git에 커밋하지 않도록 .gitignore에 추가합니다:

복사

# .gitignore .env*.local

.env.local은 기본적으로 .gitignore에 포함되어 있지만, 추가 환경변수 파일을 생성한 경우 명시적으로 추가하는 것이 좋습니다.

 

요약

• .env 파일 생성: 민감한 정보는 .env 파일에 저장합니다.
• Next.js 자동 로드: Next.js는 .env 파일을 자동으로 로드하므로 process.env.VARIABLE_NAME으로 접근합니다.
• 서버 사이드 vs 클라이언트 사이드:
  • 서버 사이드: 직접 process.env 변수 사용
  • 클라이언트 사이드: 반드시 NEXT_PUBLIC_ 접두사를 붙여 사용
• 서버 재시작: 변경 후 서버를 재시작해야 적용됩니다.