Firebase CLI를 사용해 Next.js 웹 앱을 Firebase에 배포하고 Firebase Hosting으로 이를 제공할 수 있습니다. CLI는 Next.js 설정을 따르고 추가 구성을 0개 또는 최소한으로 하여 이를 Firebase 설정으로 변환합니다. 앱에 동적 서버 측 로직이 포함되어 있는 경우 CLI는 해당 로직을 Cloud Functions for Firebase에 배포합니다.
Firebase CLI가 getServerSideProps의 사용을 감지합니다.
이러한 경우 CLI는 Cloud Functions for Firebase에 함수를 배포하여 동적 서버 코드를 실행합니다. 도메인 및 런타임 구성과 같은 함수에 대한 정보는 Firebase Console에서 볼 수 있습니다
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 AppconstfirebaseApp=getApp(useRouter().query.__firebaseAppName);
[null,null,["최종 업데이트: 2025-08-31(UTC)"],[],[],null,["\u003cbr /\u003e\n\nUsing the Firebase CLI, you can deploy your Next.js Web apps to Firebase and\nserve them with Firebase Hosting. The CLI respects your Next.js settings and\ntranslates them to Firebase settings with zero or minimal extra configuration on\nyour part. If your app includes dynamic server-side logic, the CLI deploys that\nlogic to Cloud Functions for Firebase.\n| **Note:** Framework-aware Hosting is an early public preview. This means that the functionality might change in backward-incompatible ways. A preview release is not subject to any SLA or deprecation policy and may receive limited or no support.\n| **Caution:** For developers creating a full-stack Next.js app, we strongly recommend [Firebase App Hosting](/docs/app-hosting). If you're already using the frameworks experiment in the Firebase CLI, we recommend \"graduating\" to App Hosting. With App Hosting, you'll have a unified solution to manage everything from CDN to server-side rendering, along with improved GitHub integration.\n\nBefore you begin\n\nBefore you get started deploying your app to Firebase,\nreview the following requirements and options:\n\n- Firebase CLI version 12.1.0 or later. Make sure to [install the CLI](/docs/cli#install_the_firebase_cli) using your preferred method.\n- Optional: Billing enabled on your Firebase project\n (required if you plan to use SSR)\n\n- Optional: use the experimental ReactFire library to benefit from its\n Firebase-friendly features\n\nInitialize Firebase\n\nTo get started, initialize Firebase for your framework project.\nUse the Firebase CLI for a new project, or modify `firebase.json` for an\nexisting project.\n\nInitialize a new project\n\n1. In the Firebase CLI, enable the web frameworks preview: \n\n ```\n firebase experiments:enable webframeworks\n ```\n2. Run the initialization command from the CLI and then follow the prompts:\n\n ```\n firebase init hosting\n ```\n\n \u003cbr /\u003e\n\n3. Answer yes to \"Do you want to use a web framework? (experimental)\"\n\n4. Choose your hosting source directory. If this is an existing Next.js app,\n the CLI process completes, and you can proceed to the next section.\n\n5. If prompted, choose Next.js.\n\nServe static content\n\nAfter initializing Firebase, you can serve static content with the standard\ndeployment command: \n\n firebase deploy\n\nYou can [view your deployed app](/docs/hosting/test-preview-deploy#view-changes)\non its live site.\n\nPre-render dynamic content\n\nThe Firebase CLI will detect usage of\n[getStaticProps](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props)\nand [getStaticPaths](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths).\n\nOptional: integrate with the Firebase JS SDK\n\nWhen including Firebase JS SDK methods in both server and client bundles, guard\nagainst runtime errors by checking `isSupported()` before using the product.\nNot all products are\n[supported in all environments](/docs/web/environments-js-sdk#other_environments).\n| **Tip:** consider using [ReactFire](https://github.com/FirebaseExtended/reactfire#reactfire), which does this for you automatically.\n\nOptional: integrate with the Firebase Admin SDK\n\nAdmin SDK bundles will fail if included in your browser build; refer to them\nonly inside [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching/get-static-props)\nand [getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching/get-static-paths).\n\nServe fully dynamic content (SSR)\n\nThe Firebase CLI will detect usage of\n[getServerSideProps](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props).\nIn such cases, the CLI will deploy functions to Cloud Functions for Firebase to run dynamic\nserver code. You can view information about these functions, such as their domain and runtime\nconfiguration, in the [Firebase console](https://console.firebase.google.com/project/_/functions).\n\nConfigure Hosting behavior with `next.config.js`\n\nImage Optimization\n\nUsing [Next.js Image Optimization](https://nextjs.org/docs/basic-features/image-optimization)\nis supported, but it will trigger creation of a function\n(in [Cloud Functions for Firebase](/docs/functions)), even if you're not using SSR.\n| **Note:** Because of this, image optimization and Hosting preview channels don't interoperate well together.\n\nRedirects, Rewrites, and Headers\n\nThe Firebase CLI respects\n[redirects](https://nextjs.org/docs/api-reference/next.config.js/redirects),\n[rewrites](https://nextjs.org/docs/api-reference/next.config.js/rewrites), and\n[headers](https://nextjs.org/docs/api-reference/next.config.js/headers) in\n`next.config.js`, converting them to their\nrespective equivalent Firebase Hosting configuration at deploy time. If a\nNext.js redirect, rewrite, or header cannot be converted to an equivalent\nFirebase Hosting header, it falls back and builds a function---even if you\naren't using image optimization or SSR.\n\nOptional: integrate with Firebase Authentication\n\nThe web framework-aware Firebase deployment tooling will automatically keep\nclient and server state in sync using cookies. There are some methods provided\nfor accessing the authentication context in SSR:\n\n- The Express `res.locals` object will optionally contain an authenticated Firebase App instance (`firebaseApp`) and the currently signed-in user (`currentUser`). This can be accessed in `getServerSideProps`.\n- The authenticated Firebase App name is provided on the route query (`__firebaseAppName`). This allows for manual integration while in context:\n\n // get the authenticated Firebase App\n const firebaseApp = getApp(useRouter().query.__firebaseAppName);"]]
