您可以使用 Firebase CLI 將 Next.js 網頁應用程式部署至 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 圖片最佳化 但會觸發建立函式 (在 Cloud Functions for Firebase 中)，即使您未使用 SSR 也是如此。
重新導向、重寫和標頭
Firebase CLI 會尊重 next.config.js 中的重新導向、重寫和標頭，並在部署時將這些項目轉換為相應的 Firebase Hosting 設定。如果
Next.js 重新導向、重寫或標頭無法轉換為對等項目
Firebase Hosting 標頭，因此會退回並建構函式，即使您
未採用圖片最佳化或 SSR
選用：整合 Firebase 驗證
網路架構感知 Firebase 部署工具會自動 用戶端和伺服器狀態。以下列舉一些方法 以存取 SSR 中的驗證內容：
- Express
res.locals物件可選擇包含 Firebase 應用程式執行個體 (firebaseApp) 和目前登入的使用者 (currentUser).您可以前往getServerSideProps存取這項設定。 - 經過驗證的 Firebase 應用程式名稱會在路徑查詢中提供
(
__firebaseAppName).如此一來，您就能在適用情況下手動整合：
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);