您可以使用 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。
初始化新專案
- 在 Firebase CLI 中啟用網頁架構預覽功能：
firebase experiments:enable webframeworks
從 CLI 執行初始化指令，然後按照提示操作：
firebase init hosting
回答「是」(實驗功能)」
選擇要託管來源目錄。如果這是現有的 Next.js 應用程式，CLI 程序就會完成，您可以繼續閱讀下一節。
如果出現提示訊息，請選擇 Next.js。
提供靜態內容
初始化 Firebase 後，您可以使用標準部署指令提供靜態內容：
firebase deploy
您可以在實際網站上查看已部署的應用程式。
預先轉譯動態內容
Firebase CLI 會偵測 getStaticProps 和 getStaticPaths 的用法。
選用：整合 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 設定 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中存取這項資訊。 - 經過驗證的 Firebase 應用程式名稱會在路徑查詢 (
__firebaseAppName) 中提供，這樣就能在結構定義中手動整合：
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);