Tích hợp Next.js

Bằng cách sử dụng Firebase CLI, bạn có thể triển khai các ứ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à không cần hoặc chỉ cần cấu hình bổ sung tối thiểu trên phần của bạn. Nếu ứng dụng của bạn có logic động phía máy chủ, thì CLI sẽ triển khai logic đó lên Cloud Functions for Firebase.

Trước khi bắt đầu

Trước khi bắt đầu triển khai ứng dụng lên Firebase, hãy xem các yêu cầu và lựa chọn sau:

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 Firebase CLI 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

  1. Trong Firebase CLI, hãy bật bản dùng thử khung web: 
    firebase experiments:enable webframeworks

  2. Chạy lệnh khởi chạy từ CLI rồi làm theo lời nhắc: 

    firebase init hosting

  3. Trả lời có cho câu hỏi "Bạn có muốn sử dụng khung web? (thử nghiệm)"

  4. 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.

  5. 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 trực tiếp của ứng dụng đó.

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.

Không bắt buộc: tích hợp với Firebase JS SDK

Khi đưa các phương thức Firebase JS SDK vào cả gói máy chủ và gói máy khách, hãy bảo vệ chống lạ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 Firebase Admin SDK

Gói Admin SDK sẽ không thành công nếu được đưa vào bản dựng trình trình duyệt; chỉ tham khảo các gói này 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 lê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 của Hosting bằng next.config.js

Tối ưu hoá hình ảnh

Bạn có thể sử dụng tính năng Tối ưu hoá hình ảnh Next.js được hỗ trợ, 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.

Chuyển hướng, Viết lại và Tiêu đề

CLI 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 đó thành cấu hình Firebase Hosting tương ứng tại thời điểm triển khai.Firebase Nếu không thể chuyển đổi lệnh chuyển hướng, viết lại hoặc tiêu đề Next.js thành tiêu đề Firebase Hosting tương đương, thì lệnh đó 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 Xác thực Firebase

Công cụ triển khai Firebase nhận biết khung web sẽ tự động giữ cho trạng thái máy khách và máy chủ đồng bộ 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.locals 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 trong getServerSideProps.
  • Tên Ứng dụng Firebase đã xác thực được cung cấp trên 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);