​
Thiết lập Firebase

Hướng dẫn nhanh để tạo tài khoản Firebase, khởi tạo ứng dụng web, và lấy thông tin cấu hình.

​
1. Tạo tài khoản Firebase

​
Bước 1: truy cập Firebase console

  1. Vào Firebase Console
  2. Đăng nhập bằng tài khoản Google
  3. Nếu chưa có tài khoản, hãy tạo một tài khoản mới

​
Bước 2: tạo dự án mới

  1. Nhấp “Tạo dự án” hoặc “Thêm dự án”
  2. Nhập tên dự án: claude-code-task-management
  3. Chọn hoặc tạo một tổ chức Google Cloud (tùy chọn)
  4. Tắt tùy chọn Google Analytics (tùy chọn)
  5. Chờ Firebase tạo dự án (1-2 phút)

​
2. Tạo WebApp trong Firebase

​
Bước 1: thêm ứng dụng web

Sau khi dự án được tạo:
  1. Nhấp vào biểu tượng “WEB” để thêm ứng dụng web
  2. Nhập tên ứng dụng: claude-code-task-management
  3. (Tùy chọn) Chọn thiết lập Firebase Hosting
  4. Nhấp “Đăng ký ứng dụng”

​
3. Lấy thông tin config Firebase

Sau khi đăng ký ứng dụng, bạn sẽ nhận được Firebase config như sau: 
const firebaseConfig = {
  apiKey: "AIzaSyDxxxxxxxxxxxxxx",
  authDomain: "claude-code-task-management.firebaseapp.com",
  projectId: "claude-code-task-management",
  storageBucket: "claude-code-task-management.appspot.com",
  messagingSenderId: "123456789012",
  appId: "1:123456789012:web:abcdef1234567890"
};

​
Nơi tìm thông tin config

  • Đối với ứng dụng mới: Thông tin hiển thị sau khi nhấp “Đăng ký ứng dụng”
  • Đối với ứng dụng hiện có:
    1. Vào Cài đặt dự án (Project Settings)
    2. Chuyển sang tab Ứng dụng (Apps)
    3. Tìm ứng dụng web của bạn
    4. Nhấp biểu tượng cài đặt hoặc Cấu hình
    5. Sao chép firebaseConfig

​
4. Cấu hình .env của dự án Next.js

​
Bước 1: tạo file .env.local

Trong thư mục gốc dự án, tạo hoặc chỉnh sửa file .env.local: 
NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyDxxxxxxxxxxxxxx
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=claude-code-task-management.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=claude-code-task-management
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=claude-code-task-management.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789012
NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789012:web:abcdef1234567890

​
Lưu ý quan trọng

  • Sử dụng prefix NEXT_PUBLIC_ để các biến có thể truy cập ở phía client
  • Thay thế giá trị ví dụ bằng thông tin config Firebase thực tế
  • Không commit .env.local vào git

​
Bước 2: cập nhật .gitignore

Thêm vào file .gitignore: 
.env.local
.env.*.local