整合 Next.js

使用 Firebase CLI,您可以將 Next.js 網頁應用程式部署至 Firebase,並透過 Firebase Hosting 提供服務。CLI 會遵守 Next.js 設定,並將其轉換為 Firebase 設定,您只需進行少量或完全不需要額外設定。如果應用程式包含動態伺服器端邏輯,CLI 會將該邏輯部署至 Cloud Functions for Firebase

事前準備

開始將應用程式部署至 Firebase 之前,請先詳閱下列需求和選項:

  • Firebase CLI 12.1.0 以上版本。請務必使用偏好的方法安裝 CLI
  • 選用:Firebase 專案已啟用計費功能 (如要使用伺服器端算繪,則必須啟用)

  • 選用:使用實驗性 ReactFire 程式庫,享有 Firebase 友善功能

初始化 Firebase

如要開始使用,請為架構專案初始化 Firebase。如果是新專案,請使用 Firebase CLI;如果是現有專案,請修改 firebase.json

初始化新專案

  1. Firebase CLI 中,啟用網頁架構預覽功能:
    firebase experiments:enable webframeworks
  2. 從 CLI 執行初始化指令,然後按照提示操作:

    firebase init hosting

  3. 回答「是」來使用網路架構。(實驗功能)

  4. 選擇主機來源目錄。如果是現有的 Next.js 應用程式,CLI 程序會完成,您可以繼續進行下一節。

  5. 如果系統出現提示,請選擇 Next.js。

提供靜態內容

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

firebase deploy

您可以在正式網站上查看已部署的應用程式

預先算繪動態內容

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 標頭,系統會回溯並建構函式,即使您未使用圖片最佳化或伺服器端算繪功能也一樣。

選用:與 Firebase 驗證整合

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

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