整合 Next.js

您可以使用 Firebase CLI 將 Next.js Web 應用程式部署至 Firebase,並透過 Firebase Hosting 提供服務。CLI 會尊重您的 Next.js 設定,並將其轉譯為 Firebase 設定,而您只需進行零或最少額外的額外設定。如果應用程式含有動態伺服器端邏輯,CLI 會將該邏輯部署至 Cloud Functions for Firebase。目前支援的最新 Next.js 版本為 13.4.7。

事前準備

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

  • Firebase CLI 12.1.0 以上版本。請務必使用偏好的方法安裝 CLI
  • 選用:在 Firebase 專案中啟用付費功能 (如要使用 SSR,則為必要條件)

  • 選用:使用實驗性 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 標頭,系統會改為建立函式,即使您未使用圖片最佳化或 SSR 也一樣。

選用:整合 Firebase 驗證

支援網路架構的 Firebase 部署工具會自動使用 Cookie 讓用戶端和伺服器狀態保持同步。以下提供幾種方法,可用於存取 SSR 中的驗證內容:

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