整合 Next.js

您可以使用 Firebase CLI 將 Next.js 網頁應用程式部署至 Firebase, 並透過 Firebase 託管。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 後,您就能按照標準將靜態內容提供 「get deployment」指令:

firebase deploy

您可以查看已部署的應用程式 追蹤到實際網站

預先轉譯動態內容

Firebase CLI 會偵測 getStaticPropsgetStaticPaths

選用:整合 Firebase JS SDK

在伺服器和用戶端套裝組合中加入 Firebase JS SDK 方法時,請注意 在使用產品前檢查 isSupported(),藉此解決執行階段錯誤。 並非所有產品 適用於所有環境

選用:與 Firebase Admin SDK 整合

如果瀏覽器版本中包含 Admin SDK 套件,就無法執行。介紹他們 getStaticProps 內 和 getStaticPaths

提供完整動態內容 (SSR)

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

使用 next.config.js 設定託管行為

圖片最佳化

使用 Next.js 圖片最佳化 但會觸發建立函式 (位於 Cloud Functions for Firebase 中),即使您未使用 SSR 也是如此。

重新導向、重新寫入及標頭

Firebase CLI 遵循 redirects重新編寫,以及 標題next.config.js,將他們轉換為 會在部署期間連結至對應的 Firebase 託管設定。如果 Next.js 重新導向、重寫或標頭無法轉換為對等項目 Firebase 託管標頭後,會改回原本的服務並建構函式,即使您 未採用圖片最佳化或 SSR

選用:整合 Firebase 驗證

網路架構感知 Firebase 部署工具會自動 用戶端和伺服器狀態。以下列舉一些方法 以存取 SSR 中的驗證內容:

  • Express res.locals 物件可選擇包含 Firebase 應用程式執行個體 (firebaseApp) 和目前登入的使用者 (currentUser)。您可以前往 getServerSideProps 存取這項設定。
  • 經過驗證的 Firebase 應用程式名稱會在路徑查詢中提供 (__firebaseAppName)。如此一來,您就能在適用情況下手動整合:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);