Khi sử dụng CLI Firebase, bạn có thể triển khai ứng dụng Web Next.js lên Firebase và phân phát các ứng dụng đó bằng Firebase Hosting. CLI tuân theo các chế độ cài đặt Next.js và chuyển đổi các chế độ cài đặt đó thành chế độ cài đặt Firebase mà bạn không cần phải thêm cấu hình nào hoặc chỉ cần thêm cấu hình tối thiểu. Nếu ứng dụng của bạn chứa logic phía máy chủ động, thì CLI sẽ triển khai logic đó cho Cloud Functions for Firebase. Phiên bản Next.js mới nhất được hỗ trợ là 13.4.7.
Trước khi bắt đầu
Trước khi bắt đầu triển khai ứng dụng của bạn lên Firebase, hãy xem xét các yêu cầu và tuỳ 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 muốn.
Không bắt buộc: Bật tính năng thanh toán trên dự án Firebase của bạn (bắt buộc nếu bạn dự định sử dụng SSR)
Không bắt buộc: sử dụng thư viện ReactFire thử nghiệm để tận dụng các tính năng thân thiện với Firebase
Khởi động Firebase
Để bắt đầu, hãy khởi chạy Firebase cho dự án khung.
Sử dụng CLI Firebase cho dự án mới hoặc sửa đổi firebase.json cho dự án hiện có.
Khởi chạy dự án mới
- Trong CLI Firebase, hãy bật bản 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
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ữ. Nếu đây là một ứng dụng Next.js hiện có, thì quy 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 tiêu 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.
Kết xuất trước nội dung động
CLI 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 SDK JS Firebase
Khi đưa các phương thức SDK JS Firebase vào cả gói máy chủ và ứng dụng, hãy bảo vệ khỏi 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ị Firebase
Gói SDK quản trị sẽ không hoạt động nếu được đưa vào bản dựng trình duyệt; chỉ tham chiếu đến các gói đó bên trong getStaticProps và getStaticPaths.
Phân phát nội dung hoàn toàn động (SSR)
CLI 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 đến Cloud Functions for 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 của chúng, trong bảng điều khiển Firebase.
Định cấu hình hành vi Hosting bằng next.config.js
Tối ưu hoá hình ảnh
Chúng tôi hỗ trợ việc sử dụng tính năng Tối ưu hoá hình ảnh Next.js, nhưng tính năng này sẽ kích hoạt việc tạo một hàm (trong Cloud Functions for Firebase), ngay cả khi bạn không sử dụng SSR.
Lệnh chuyển hướng, lệnh viết lại và tiêu đề
CLI Firebase tuân theo
các lệnh chuyển hướng,
viết lại và
tiêu đề trong
next.config.js, chuyển đổi các lệnh này thành
cấu hình Firebase Hosting tương đương tương ứng tại thời điểm triển khai. Nếu không thể chuyển đổi lệnh chuyển hướng, ghi lại hoặc tiêu đề Next.js thành tiêu đề Firebase Hosting tương đương, thì lệnh chuyển hướng, ghi lại hoặc tiêu đề đó 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 nhận biết khung web sẽ tự động đồng bộ hoá trạng thái máy khách và máy chủ bằng cookie. Có một số phương thức được cung cấp để truy cập vào ngữ cảnh xác thực trong SSR:
- Đối tượng
res.localsExpress sẽ tuỳ ý chứa một thực thể Ứng dụng Firebase đã xác thực (firebaseApp) và người dùng hiện đã đă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 theo cách thủ công trong ngữ cảnh:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);