Bằng cách sử dụng Firebase CLI, bạn có thể triển khai ứng dụng web Next.js cho Firebase và phân phát chúng bằng tính năng Lưu trữ Firebase. CLI tôn trọng các cài đặt Next.js của bạn và chuyển chúng sang chế độ cài đặt Firebase mà không có hoặc có cấu hình bổ sung tối thiểu đang bật phần của bạn. Nếu ứng dụng của bạn bao gồm logic động phía máy chủ, CLI sẽ triển khai logic sang 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ắt đầu triển khai ứng dụng trên 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 cách sử dụng phương thức ưa thích của bạ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 đị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 phù hợp với Firebase
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 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 Giao diện dòng lệnh (CLI) của Firebase, 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
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ó, quá trình CLI 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 phương pháp lệnh triển khai:
firebase deploy
Bạn có thể xem ứng dụng đã triển khai trên trang web đang hoạt động.
Kết xuất trước nội dung động
Firebase CLI sẽ phát hiện việc sử dụng getStaticProp 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à ứng dụng, hãy bảo vệ
để kiểm tra 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
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 của bạn; nhắc đến chúng chỉ bên trong getStaticProps và getStaticPaths.
Phân phát nội dung hoàn toàn động (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 hàm đến Cloud Functions cho Firebase để chạy các hàm động mã máy chủ của bạn. Bạn có thể xem thông tin về các hàm này, chẳng hạn như miền và thời gian chạy của chúng cấu hình, trong bảng điều khiển của Firebase.
Định cấu hình hành vi Lưu trữ với next.config.js
Tối ưu hoá hình ảnh
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 Chức năng đám mây dành 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 thủ
chuyển hướng,
ghi lại và
tiêu đề ở
next.config.js, chuyển đổi họ thành
cấu hình tương đương của tính năng Lưu trữ Firebase tại thời điểm triển khai. Nếu một
Chuyển hướng, ghi lại hoặc tiêu đề Next.js không thể được chuyển đổi thành một URL tương đương
Tiêu đề Lưu trữ Firebase, tiêu đề này sẽ quay lại và tạo một chức năng—ngay cả khi bạn
hiện không 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 duy trì máy khách và máy chủ của bạn đồng bộ hoá 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 Express
res.localssẽ tuỳ ý chứa tệp xác thực Phiên bản ứng dụng Firebase (firebaseApp) và người dùng hiện đang đăng nhập (currentUser). Bạn có thể truy cập vào tính năng này tronggetServerSideProps. - Tên Ứng dụng Firebase đã xác thực được cung cấp trên truy vấn về tuyến đường
(
__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);