For a full-stack Next.js app, Firebase recommends Firebase App Hosting, a deployment product distinct from classic Firebase Hosting. It connects to a GitHub repository and builds and rolls out the app when you push to its configured live branch. Use classic Hosting’s CLI workflow when you are publishing static files; it is not, on its own, a guide to deploying every full-stack Next.js feature.
Should you use Firebase Hosting or App Hosting for Next.js?
Choose the deployment path based on what your app needs to run:
| Route | Best fit | How deployment works | Important qualification |
|---|---|---|---|
| Firebase App Hosting | Full-stack framework apps, including Next.js | A GitHub-connected backend builds the app and rolls out a Cloud Run revision when the live branch changes. | Requires a Firebase project on the Blaze pay-as-you-go plan. |
| Classic Firebase Hosting | Static assets and single-page apps | Initialize Hosting with the Firebase CLI, then deploy the selected public directory. | This static workflow does not establish support for every full-stack Next.js feature. |
| Framework-aware Firebase Hosting integration | Existing users in the Next.js frameworks experiment | A preview CLI integration can translate some Next.js behavior to Hosting and Cloud Functions. | It is an early public preview, closed to new participants, with no SLA or deprecation policy. Firebase recommends existing participants graduate to App Hosting. |
For a new full-stack Next.js deployment, follow the App Hosting steps below. Firebase’s current App Hosting overview and Hosting quickstart describe it as the recommended route for full-stack framework apps, while classic Hosting remains suited to static and single-page apps (Firebase App Hosting; Get started with Firebase Hosting).
How do you deploy a full-stack Next.js app with Firebase App Hosting?
1. Check the prerequisites
- An existing Next.js app at version 13.5.x or later in a GitHub repository.
- A Firebase project with the Blaze pay-as-you-go plan enabled.
- Access to choose the repository, app root directory, deployment region, and live branch.
Firebase’s getting-started guide documents the GitHub-based flow for Next.js 13.5.x and later and calls out the Blaze plan requirement (Get started with App Hosting). A Firebase-provided subdomain may have no cost, but that does not mean all App Hosting or other Firebase usage is free; costs depend on service usage.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
- Reference Book
- Osprey Fortress #58 Vietnam Firebases 1965-73 American & Australian Forces by Randy E M Foster & Peter Dennis
- Book has slightly yellowed
2. Create an App Hosting backend and connect GitHub
In the Firebase console or with the Firebase CLI, create an App Hosting backend and connect it to the repository containing your Next.js app. The backend manages the hosted resources and the repository connection. Follow the setup flow in Firebase’s App Hosting guide.
3. Choose the app root, region, and live branch
In the backend setup, select the directory containing the app if it is not at the repository root, choose a primary region, and select the branch that should trigger production rollouts. Firebase’s walkthrough uses main as its example branch and says automatic rollouts are enabled by default. The documented setup flow preselects the newest recommended Node.js version.
4. Deploy and monitor the rollout
After setup, a commit pushed to the configured live branch starts the deployment flow. App Hosting uses Cloud Build to build the app, stores the resulting container in Artifact Registry, and creates a Cloud Run revision. When that revision is healthy, traffic is directed to it. Check build and rollout status in the Firebase console; use the Google Cloud console to inspect logs. Firebase describes this workflow in its App Hosting overview and getting-started guide.
5. Open the app and configure production settings
The setup guide describes a Firebase-provided address in this form: backend-id--project-id.us-central1.hosted.app. The first URL can take around five minutes to work. You can also connect a custom domain and configure environment variables and secret parameters for the backend; use the console’s backend settings and the setup guide for the current flow.
6. Keep billing visible
Monitor usage in the Firebase usage and billing dashboard, and consider setting budget alerts. Firebase recommends both steps; the actual bill depends on your use, so consult current pricing and your project’s usage rather than treating the hosted subdomain as a price guarantee (Firebase App Hosting; App Hosting quickstart).
Can you deploy a static Next.js site with classic Firebase Hosting?
Yes, when the site has been exported or otherwise built into static files that Hosting can serve. The Firebase Hosting quickstart provides a direct CLI workflow for deploying Hosting content and configuration; it is not a one-command conversion of all Next.js server features into static output.
- From the project root, run
firebase init hosting. - Select the Firebase project and choose the public root directory containing the files to serve.
- Review the generated
firebase.jsonand.firebasercconfiguration. - Deploy Hosting content and configuration with
firebase deploy --only hosting. - Open the deployed site at the standard Firebase subdomain,
PROJECT_ID.web.apporPROJECT_ID.firebaseapp.com.
These commands and subdomains are from Firebase’s Hosting quickstart. If the Firebase CLI detects an SSR framework such as Next.js, it may recommend App Hosting instead.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What should existing users of the Next.js Hosting preview know?
Firebase’s framework-aware Next.js integration for classic Hosting is not the default route for a fresh deployment. Firebase says the frameworks experiment is an early public preview, has no SLA or deprecation policy, and is permanently closed to new participants. Existing users are advised to move to App Hosting (Integrate Next.js | Firebase Hosting).
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11The preview integration can detect getStaticProps and getStaticPaths. For server-side rendering with getServerSideProps, it deploys dynamic server logic to Cloud Functions. It can translate supported redirects, rewrites, and headers into Hosting configuration; unsupported translations may require a function fallback. Image optimization can also create a function, even without SSR, and does not work well with Hosting preview channels. These behaviors apply to the preview integration described in Firebase’s Next.js Hosting documentation.
What Next.js feature caveats should you check on App Hosting?
- Image optimization: Firebase’s App Hosting troubleshooting page says built-in Next.js image optimization is disabled by default unless you explicitly set
images.unoptimizedtofalseor use a custom image loader. - Encoded URL paths: Cloud Run decodes percent-encoded URL paths, which can affect features that expect encoded paths.
- Middleware caching: App Hosting currently limits caching for Next.js apps that use middleware.
These implementation details are documented in Firebase’s App Hosting FAQ and troubleshooting; check that page when configuring the app because feature behavior can change.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
