集成 Next.js

使用 Firebase CLI,您可以將 Next.js Web 應用程式部署到 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 中,啟用 Web 框架預覽:
    firebase experiments:enable webframeworks
  2. 從 CLI 執行初始化指令,然後依照提示操作:

    firebase init hosting

  3. 對“您想使用 Web 框架嗎?(實驗性)”回答“是”

  4. 選擇您的託管來源目錄。如果這是現有的 Next.js 應用程序,則 CLI 過程完成,您可以繼續下一部分。

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

提供靜態內容

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

firebase deploy

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

預先渲染動態內容

Firebase CLI 將偵測getStaticPropsgetStaticPaths的使用情況。

可選:與 Firebase JS SDK 集成

在伺服器和用戶端捆綁包中包含 Firebase JS SDK 方法時,請在使用產品之前檢查isSupported()來防止執行時間錯誤。並非所有產品都在所有環境中支援

可選:與 Firebase Admin SDK 集成

如果包含在您的瀏覽器版本中,管理 SDK 套裝組合將會失敗;僅在getStaticPropsgetStaticPaths內引用它們。

提供完全動態的內容 (SSR)

Firebase CLI 將偵測getServerSideProps的使用情況。在這種情況下,CLI 會將函數部署到 Cloud Functions for Firebase 以執行動態伺服器程式碼。您可以在Firebase 控制台中查看有關這些函數的信息,例如它們的網域和執行時間配置。

使用next.config.js配置託管行為

影像優化

支援使用Next.js 影像最佳化,但即使您不使用 SSR,它也會觸發函數的建立(在Cloud Functions for Firebase中)。

重定向、重寫和標頭

Firebase CLI 尊重next.config.js中的重定向重寫標頭,並在部署時將它們轉換為各自等效的 Firebase 託管配置。如果 Next.js 重定向、重寫或標頭無法轉換為等效的 Firebase Hosting 標頭,它會回退並建立一個函數 - 即使您沒有使用圖像最佳化或 SSR。

可選:與 Firebase 身份驗證集成

Web 框架感知的 Firebase 部署工具將使用 cookie 自動保持用戶端和伺服器狀態同步。提供了一些方法用於存取 SSR 中的身份驗證上下文:

  • Express res.locals物件可以選擇包含經過驗證的 Firebase 應用程式實例 ( firebaseApp ) 和目前登入的使用者 ( currentUser )。可以在getServerSideProps中存取它。
  • 經過驗證的 Firebase 應用程式名稱在路由查詢 ( __firebaseAppName ) 中提供。這允許在上下文中進行手動整合:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);