1. Tại sao cần quản lý biến môi trường Khi phát triển cùng một codebase cho Next.js (web) và Expo (mobile), các giá trị như API endpoint, khóa bí mật, cổng kết nối hoặc cờ bật/tắt tính năng thường khác nhau giữa development, staging và production. Nếu để rải rác trong mã nguồn, việc triển khai sẽ dễ gây lỗi và khó bảo trì. 2. Chiến lược tập trung biến môi trường - Tạo thư mục config/ ở gốc monorepo, bên trong có các file env.development.ts, env.staging.ts, env.production.ts. - Mỗi file export một object kiểu TypeScript chứa tất cả khóa cần thiết, ví dụ apiBaseUrl, sentryDsn, featureFlags. - Sử dụng công cụ như dotenv-cli hoặc expo-config-plugins để nạp file phù hợp khi chạy script build hoặc start. - Trên CI/CD, chỉ cần set biến ENV=staging để tự động chọn file config tương ứng. 3. Sử dụng Feature Flag để bật/tắt tính năng - Định nghĩa danh sách flag trong object featureFlags của config, ví dụ newCheckoutFlow: true, darkModeBeta: false. - Viết hook useFeatureFlag(flagName) dùng chung cho web và mobile, đọc giá trị từ config hiện tại. - Component chỉ render khi flag bật, giúp triển khai dần tính năng mới mà không cần deploy lại toàn bộ ứng dụng. 4. Ví dụ thực tế với Next.js và Expo - Next.js: trong next.config.js import config từ config/env.[ENV].ts và gán vào env để các trang server-side và client-side đều truy cập được. - Expo: trong app.config.js đọc cùng file config, sau đó dùng expo-constants để expose biến cho runtime mobile. - Cả hai nền tảng đều dùng chung hook useFeatureFlag nên logic điều khiển tính năng hoàn toàn đồng bộ. 5. Lời khuyên áp dụng - Luôn version hóa file config cùng với source code, không commit giá trị production thật vào repo. - Sử dụng secret manager của cloud provider (AWS Parameter Store, GCP Secret Manager) để tiêm giá trị nhạy cảm vào CI/CD. - Viết test đơn vị cho hook useFeatureFlag đảm bảo flag hoạt động đúng trên cả hai nền tảng. - Đánh giá định kỳ danh sách flag, xóa flag cũ để tránh rối rắm code.