Lazy Panda



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

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.

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 ...

React Nextjs deployment firebase aws vercel


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
  • Login to your Account 
    • 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 SSR folder structure


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";




const dev = process.env.NODE_ENV !== "production";

const app = next({


// the absolute directory from the package.json file that initialises this module

// IE: the absolute path from the root of the Cloud Function

conf: { distDir: "dist/client" },


const handle = app.getRequestHandler();


exports.nextServer = functions.https.onRequest((request, response) => {

// log the page.js file or resource being requested

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 - 

nextjs client folder

Once you have done the initial setup, please update your package.json file like the following - 

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 to help.

- LP