Việc thiết lập các biến môi trường trong dự án NextJS bao gồm một số bước để đảm bảo rằng thông tin nhạy cảm của bạn được quản lý an toàn và có thể truy cập được trong các môi trường khác nhau.
1. Tạo một tệp `.env.local`: Trong thư mục gốc của dự án Next.js hãy tạo một tệp có tên `.env.local`. Tệp này sẽ lưu trữ các biến dành riêng cho môi trường của bạn.
2. Xác định các biến môi trường của bạn: Bên trong tệp `.env.local`, bạn có thể xác định các biến môi trường của mình ở định dạng `NAME=VALUE`. Ví dụ:
Thay thế `your-api-key` and `https://api.example.com` bằng NEXT_PUBLIC_API_KEY và NEXT_PUBLIC_API_URL.
3. Truy cập các biến môi trường trong code của bạn: Next.js tự động tải các biến được xác định trong `.env.local` vào đối tượng `process.env`. Bạn có thể truy cập các biến này ở bất kỳ đâu trong dự án Next.js của mình bằng cách tham chiếu `process.env.VARIABLE_NAME`. Ví dụ:
Chú ý: Hãy nhớ xử lý các trường hợp có thể không xác định được biến môi trường. Bạn có thể sử dụng chuỗi tùy chọn (?.) hoặc giá trị mặc định trong trường hợp biến không được đặt.
4. Khởi động lại máy chủ phát triển: Nếu máy chủ của bạn đang chạy, bạn sẽ cần khởi động lại nó để những thay đổi trong biến môi trường có hiệu lực.
5. Các biến dành riêng cho môi trường: Nếu bạn cần xác định các biến môi trường cho các môi trường khác nhau như development, staging, production. Bạn có thể tạo thêm các tệp env bổ sung như (`.env.development`, `.env.staging`, `.env.production`) và next.js sẽ tự động chọn tệp thích hợp dựa trên biến môi trường NODE_ENV.
6. Cân nhắc về bảo mật: Hãy cẩn thận không chuyển tệp `.env.local` chứa thông tin nhạy cảm của bạn sang các hệ thống kiểm soát phiên bản như Git. Bạn nên thêm nó vào tệp `.gitignore` của mình để tránh việc vô tình làm lộ bí mật của bạn. Thay vào đó, hãy cân nhắc sử dụng các tệp cấu hình dành riêng cho môi trường hoặc giải pháp quản lý bí mật an toàn để triển khai sản xuất.
Bằng cách làm theo các bước này, bạn sẽ có thể thiết lập các biến môi trường trong dự án Next.js và quản lý an toàn thông tin nhạy cảm của mình trên các môi trường khác nhau.
Nhưng thông tin liên quan khác bạn cần biết:
1. Đặt tên
Các biến môi trường không phải NEXT_PUBLIC_ chỉ khả dụng trong môi trường Node.js, nghĩa là trình duyệt không thể truy cập chúng (Máy khách chạy trong một môi trường khác).
Để làm cho giá trị của biến môi trường có thể truy cập được trong trình duyệt, Next.js có thể “nội tuyến” một giá trị, tại thời điểm xây dựng, vào gối js được phân phối tới máy khách, thay thế tất cả các tham chiếu đến `process.env.[variable]` với giá trị được mã hóa cứng. Để yêu cầu nó thực hiện điều này, bạn chỉ cần thêm NEXT_PUBLIC_ vào tiền tố biến. Ví dụ:
2. Biến môi trường mặc định
Nói chung chỉ cần một tệp `.env.local`. Tuy nhiên, đôi khi bạn có thể muốn thêm một số giá trị mặc định cho môi trường development (next dev) hoặc production (next start).
– Next.js cho phép bạn đặt mặc định trong .env (tất cả môi trường).
– .env.local luôn ghi đè các giá trị mặc định đã đặt.
3. Thứ tự tải biến môi trường
Các biến môi trường được tra cứu ở những vị trí sau, theo thứ tự, dừng khi tìm thấy biên.
– process.env
– .env.$(NODE_ENV).local
– .env.local (Không kiểm tra khi NODE_ENV là test)
– .env.$(NODE_ENV)
– .env
Good to know
– Nếu bạn đang sử dụng thư mục /src, các tệp .env* sẽ vẫn nằm trong thư mục gốc của project.
– Nếu biến môi trường NODE_ENV không được gán, Next.js sẽ tự động gán development khi chạy lệnh next dev hoặc production cho tất cả các lệnh khác.