Gợi ý & quản lý biến môi trường với .env.d.ts trong Next.js

Khi dự án lớn dần, số lượng biến môi trường (.env) tăng lên khá nhanh. Nếu không quản lý tốt, rất dễ gặp các vấn đề như:

• Gõ sai tên biến mà không biết
• Không rõ biến nào là bắt buộc
• Không được VSCode gợi ý (autocomplete)
• Bug chỉ xuất hiện khi runtime 😵

Giải pháp đơn giản và hiệu quả là khai báo kiểu cho biến môi trường bằng .env.d.ts.

---

1. Mục đích của .env.d.ts

File .env.d.ts giúp:

• VSCode / TypeScript gợi ý tên biến env
• Phát hiện lỗi thiếu hoặc sai tên biến ngay khi code
• Làm tài liệu sống (living documentation) cho toàn bộ env của project

---

2. Ví dụ file .env.d.ts

/// <reference types="node" />

declare namespace NodeJS {
  interface ProcessEnv {
    DATABASE_URL: string;
    NEXT_PUBLIC_API_URL: string;
  }
}

3. Một vài lưu ý quan trọng

• Đảm bảo .env.d.ts được include trong tsconfig.json:

{
  "include": ["src", "env.d.ts"]
}

• Không commit file .env thật lên git
• Chỉ commit:
  • .env.example
  • .env.d.ts