Khi sử dụng Giao diện dòng lệnh (CLI) của Firebase, bạn có thể triển khai các ứng dụng web Next.js cho Firebase và phân phát các ứng dụng đó bằng tính năng Lưu trữ Firebase. CLI tuân theo các chế độ cài đặt Next.js của bạn và chuyển đổi các chế độ đó sang các chế độ cài đặt Firebase mà bạn không cần hoặc có thêm cấu hình bổ sung nào. Nếu ứng dụng của bạn có logic phía máy chủ động, thì CLI sẽ triển khai logic đó cho Chức năng đám mây cho Firebase. Phiên bản Next.js được hỗ trợ mới nhất là 13.4.7.
Trước khi bắt đầu
Trước khi bắt đầu triển khai ứng dụng cho Firebase, hãy xem lại các yêu cầu và lựa chọn sau:
- Firebase CLI phiên bản 12.1.0 trở lên. Hãy nhớ cài đặt CLI bằng phương thức mà bạn ưu tiên.
Không bắt buộc: Bật tính năng thanh toán trong dự án Firebase (bắt buộc nếu bạn định sử dụng SSR)
Không bắt buộc: sử dụng thư viện ReactFire thử nghiệm để hưởng lợi từ các tính năng thân thiện với Firebase
Khởi chạy Firebase
Để bắt đầu, hãy khởi chạy Firebase cho dự án khung của bạn.
Sử dụng Giao diện dòng lệnh (CLI) của Firebase cho một dự án mới hoặc sửa đổi firebase.json cho một dự án hiện có.
Khởi chạy một dự án mới
- Trong Firebase CLI, hãy bật tính năng xem trước khung web:
firebase experiments:enable webframeworks
Chạy lệnh khởi chạy từ CLI rồi làm theo lời nhắc:
firebase init hosting
Hãy trả lời có cho câu hỏi "Bạn có muốn sử dụng khung web không? (thử nghiệm)"
Chọn thư mục nguồn lưu trữ của bạn. Nếu đây là ứng dụng Next.js hiện có, quá trình CLI sẽ hoàn tất và bạn có thể chuyển sang phần tiếp theo.
Nếu được nhắc, hãy chọn Next.js.
Phân phát nội dung tĩnh
Sau khi khởi chạy Firebase, bạn có thể phân phát nội dung tĩnh bằng lệnh triển khai chuẩn:
firebase deploy
Bạn có thể xem ứng dụng đã triển khai trên trang web đang hoạt động của ứng dụng đó.
Nội dung động kết xuất trước
Giao diện dòng lệnh (CLI) của Firebase sẽ phát hiện việc sử dụng getStaticProps và getStaticPaths.
Không bắt buộc: tích hợp với Firebase JS SDK
Khi đưa các phương thức SDK JS của Firebase vào cả gói máy chủ và gói ứng dụng, hãy phòng tránh lỗi thời gian chạy bằng cách kiểm tra isSupported() trước khi sử dụng sản phẩm.
Không phải sản phẩm nào cũng được hỗ trợ trong mọi môi trường.
Không bắt buộc: Tích hợp với SDK quản trị của Firebase
Các gói SDK dành cho quản trị viên sẽ không thành công nếu được đưa vào bản dựng trình duyệt. Bạn chỉ nên tham chiếu đến các gói đó trong getStaticProps và getStaticPaths.
Phân phát nội dung động hoàn toàn (SSR)
Giao diện dòng lệnh (CLI) của Firebase sẽ phát hiện việc sử dụng getServerSideProps. Trong những trường hợp như vậy, CLI sẽ triển khai các hàm vào Cloud Functions để Firebase chạy mã máy chủ động. Bạn có thể xem thông tin về các hàm này, chẳng hạn như miền và cấu hình thời gian chạy, trong bảng điều khiển của Firebase.
Định cấu hình hoạt động lưu trữ với next.config.js
Tối ưu hoá hình ảnh
Việc sử dụng tính năng Tối ưu hoá hình ảnh Next.js được hỗ trợ, nhưng sẽ kích hoạt việc tạo một hàm (trong Các hàm đám mây cho Firebase), ngay cả khi bạn không sử dụng SSR.
Chuyển hướng, viết lại và tiêu đề
Giao diện dòng lệnh (CLI) của Firebase tuân theo lệnh chuyển hướng, ghi lại và tiêu đề trong next.config.js, chuyển đổi chúng thành cấu hình Lưu trữ Firebase tương ứng tương ứng tại thời điểm triển khai. Nếu không thể chuyển đổi tiêu đề chuyển hướng, viết lại hoặc tiêu đề Next.js thành một tiêu đề Lưu trữ Firebase tương đương, thì hệ thống sẽ quay lại và tạo một hàm – ngay cả khi bạn không sử dụng tính năng tối ưu hoá hình ảnh hoặc SSR.
Không bắt buộc: Tích hợp với tính năng Xác thực Firebase
Công cụ triển khai Firebase có nhận biết khung web sẽ tự động đồng bộ hoá trạng thái giữa ứng dụng và máy chủ bằng cookie. Bạn có thể cung cấp một số phương thức để truy cập ngữ cảnh xác thực trong SSR:
- Đối tượng Express
res.localssẽ tuỳ ý chứa một thực thể Ứng dụng Firebase đã xác thực (firebaseApp) và người dùng hiện đang đăng nhập (currentUser). Bạn có thể truy cập vào đối tượng này tronggetServerSideProps. - Tên Ứng dụng Firebase đã xác thực được cung cấp trên truy vấn tuyến (
__firebaseAppName). Điều này cho phép tích hợp thủ công khi trong ngữ cảnh:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);