[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_109":110,"_111":-5,"_112":113,"_114":115},"routes/pages/tag.$tagName",{"_9":10,"_11":12,"_13":12,"_14":12,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28},"posts",[29],"page",1,"totalPages","totalItems","perPage",12,"siteUrl","https://lazypandatech.com","routeTag","ssr","canonicalUrl","https://lazypandatech.com/tag/ssr","humanTag","Ssr","adClient","ca-pub-2711385747041353","adSlot","3475181432",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_21":58,"_59":60,"_61":62,"_63":64,"_65":66,"_67":68,"_69":64,"_70":71,"_72":73,"_74":75,"_76":51},"id","yyzwlnai0mi2211","title","An easy way to deploy SSR-based NextJS Application to Firebase","slug","deploy-ssr-based-nextjs-app-firebase","author","Lazy Panda","date","2024-02-20","heroUrl","https://assets.lazypandatech.com/lp-blog/bg_next_deployment.png","heroAlt","nextjs ssr application deployment in firebase","tags",[106,107,108,100],"body","

I hope you are here because you need an optimal solution to host your application in the best performance and cost-effective way. In this tutorial, I will explain the pros & cons of a Single Page Application deployment specifically a NextJs Frontend Application.

To make this guide easier to discover and more relevant for readers, it now naturally covers nextjs firebase, firebase hosting, deploy nextjs firebase, nextjs ssr deployment, nextjs firebase hosting, and firebase cloud functions nextjs.

We all know NextJs is a framework built over reactjs and provides SSG (Static Site Generation) or SSR (Server Side Rendering) feature for our application. I have been using both of them for a long time and wanted to share my experience based on my implementation and understanding.

Let's jump into the facts ...

Firebase Deployment

Using the Firebase CLI, you can deploy your Next.js Web apps to Firebase and serve them with Firebase Hosting. The CLI understands the Next.js settings and translates them to Firebase settings. If your app includes dynamic server-side logic, the CLI deploys that logic to Cloud Functions for Firebase.

Why Firebase hosting?

I like the Firebase hosting because of its Pricing model. It is really cost-effective for a simple web application when there is not heavy traffic. My site is still growing, at the end of the month, I paid less than 100/- or (< $1). Which helps me to still continue to run the application. Please check the Firebase pricing model Pricing Model.

Initial Setup

I believe you already have a Firebase account and have already created a new Project. So considering the prerequisites, you need to install the following npm packages to continue further -

Install Firebase CLI tool from the terminal

npm install -g firebase-tools

firebase login

Go to your project and initiate Firebase

firebase init

Select Firebase hosting and select out as the build folder
Also, install the following npm library as well (Those help for SSR application)

npm install -D firebase-admin firebase-functions

Next.js Application set up for Static deployment

For static deployment of your Next.js application, you need to update the build script under the package.json file. So please update this command and run deploy.

Open package.json file
update build command
- build: \"next build && next export\"
Save the file and run
- firebase deploy -- only hosting

Next.js Application set up for Dynamic deployment

While doing server-side deployment, means the application leverages getServerSideProps() then you can not follow the static deployment, in such cases we have to go for dynamic deployment and run the application on the server.

After creating the Next.js application create 2 directories under your src folder -

$\"nextjs$

$\"\"$ Under the server directory please have the index.js file with the following content.

import * as admin from \"firebase-admin\"; import * as functions from \"firebase-functions\"; import next from \"next\"; admin.initializeApp(); const dev = process.env.NODE_ENV !== \"production\"; const app = next({ dev, conf: { distDir: \"dist/client\" } }); const handle = app.getRequestHandler(); exports.nextServer = functions.https.onRequest((request, response) => { console.log(\"File: \" + request.originalUrl); return app.prepare().then(() => handle(request, response)); });

Update the firebase.json file too with the following content -

{ \"hosting\": { \"public\": \"public\", \"ignore\": [ \"firebase.json\", \"**/.*\", \"**/node_modules/**\" ], \"rewrites\": [ { \"source\": \"**\", \"function\": \"nextServer\" } ] }, \"functions\": { \"source\": \".\", \"runtime\": \"nodejs16\" } }

Please add the Next.js application under the client folder.

$\"firebase-deployment\"$

Please run the following command, to execute the application on the local environment.

npm run dev

To deploy the code to Firebase, please run the following command for deployment.

npm run build npm run deploy

Hope this tutorial finds you well, In case of any challenges let me know in the below comments section.

Happy Coding!

","status","published","publishedAt","2026-05-20 14:45:50.872Z","createdBy","bvnwzsaaejxf2qp","metaDescription","A step-by-step guide on how to deploy a Next.js SSR app to Firebase. Learn a performant and cost-effective method for hosting with Firebase Functions.","keywords",[91,92,93,94,95,96,97,98,99,100],"https://lazypandatech.com/blog/deploy-ssr-based-nextjs-app-firebase","ogTitle","Deploy an SSR-based Next.js Application to Firebase","ogDescription","This tutorial provides a complete walkthrough for deploying a server-side rendered Next.js application using Firebase Hosting and Cloud Functions for a scalable","ogImage","","twitterTitle","How to Deploy a Next.js SSR App to Firebase","twitterDescription","Learn a straightforward method to deploy your Next.js SSR application on Firebase. This guide covers setup, configuration, and deployment for optimal performanc","twitterImage","jsonLd",{"_77":78,"_79":80,"_36":81,"_82":39,"_83":55,"_84":33,"_85":86,"_87":88,"_56":89,"_90":58},"relatedLinks",[],"created","2026-05-20 14:26:29.765Z","updated","@context","https://schema.org","@type","BlogPosting",{"_79":105,"_102":37},"datePublished","description","headline","image",{"_79":104,"_90":41},"isPartOf",{"_79":101,"_102":103,"_90":18},[91,92,93,94,95,96,97,98,99,100],"url","nextjs firebase","firebase hosting","deploy nextjs firebase","nextjs ssr deployment","firebase cloud functions nextjs","how to deploy nextjs ssr to firebase","deploy nextjs app router to firebase","nextjs ssr firebase functions tutorial","Next.js","Firebase","WebSite","name","LazyPandaTech Blog","ImageObject","Person","NextJs","SSR","Deployment","commit","345d355","user","analyticsEnabled","true","ga4MeasurementId","G-T1LQ6R6VY5"]

Ssr Articles

An easy way to deploy SSR-based NextJS Application to Firebase