整合 Next.js

使用 Firebase CLI,您可以將 Next.js 網路應用程式部署至 Firebase,並透過 Firebase Hosting 提供服務。

提供靜態內容

初始化 Firebase 後,您可以使用標準部署指令提供靜態內容:

firebase deploy

如果應用程式包含動態伺服器端邏輯,CLI 會將該邏輯部署至 Cloud Functions for Firebase。您可以在正式網站上查看已部署的應用程式

預先算繪動態內容

Firebase CLI 會偵測 getStaticPropsgetStaticPaths 的使用情形。

選用:與 Firebase JS SDK 整合

在伺服器和用戶端套件中加入 Firebase JS SDK 方法時,請先檢查 isSupported(),再使用產品,以免發生執行階段錯誤。並非所有產品都支援所有環境

選用:與 Firebase Admin SDK 整合

如果瀏覽器建構中包含 Admin SDK 組合,就會失敗;請僅在 getStaticPropsgetStaticPaths 中參照這些組合。

提供完全動態內容 (SSR)

Firebase CLI 會偵測 getServerSideProps 的用量。在這種情況下,CLI 會將函式部署至 Cloud Functions for Firebase,以執行動態伺服器程式碼。您可以在 Firebase 控制台中查看這些函式的相關資訊,例如網域和執行階段設定。

使用 next.config.js 設定 Hosting 行為

圖片最佳化

系統支援使用 Next.js 圖片最佳化,但即使您未使用 SSR,系統仍會觸發函式建立作業 (位於 Cloud Functions for Firebase 中)。

重新導向、重寫和標頭

Firebase CLI 會在部署時,將 next.config.js 中的重新導向重寫標頭轉換為對應的 Firebase Hosting 設定。如果 Next.js 重新導向、重寫或標頭無法轉換為對應的 Firebase Hosting 標頭,系統會回溯並建構函式,即使您未使用圖片最佳化或 SSR 也是如此。

選用:與 Firebase 驗證整合

Firebase 部署工具會偵測網路架構,並自動使用 Cookie 讓用戶端和伺服器狀態保持同步。系統提供幾種方法,可在伺服器端算繪 (SSR) 中存取驗證環境:

  • Express res.locals 物件會選擇性包含經過驗證的 Firebase 應用程式例項 (firebaseApp) 和目前登入的使用者 (currentUser)。這可以在 getServerSideProps 中存取。
  • 系統會在路徑查詢 (__firebaseAppName) 中提供通過驗證的 Firebase 應用程式名稱。這可讓您在情境中手動整合:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);