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