written by Rajesh

Fri Jan 20 2023

Deploy Next Js project in firebase for free with all features

Deploy Next Js project in firebase for free with all features

Next JS is a powerful framework for production based on react js. When it's come to deployment most of the young developers were looking for free deployment with all features enabled.  There we have few options. The one firebase powered by Google.

In this section we are going to deploy next is application in firebase for free. we can deploy next js project in fire base in two ways what is static way and the second one is dynamic using cloud functions. In deploying Static method using next export. some of the features were not working like Image Optimization (default loader), Internationalized Routing , API Routes, Incremental Static Regeneration, fallback: true, getServerSideProps


In this lecture, we are going to deploy the next js project with dynamic using cloud function and it will work all the features including  

Image Optimization (default loader)

Internationalized Routing

API Routes





Incremental Static Regeneration

fallback: true




First, you have a firebase account and make sure you must upgrade to blaze plan. Why because of we need cloud functions without upgrading to blaze plan we can't use cloud functions in firebase. firebase will provide 2,000,000 function invocations absolutely free of cost.


·        Now Open your next JS project file directory and install the firebase CLI tools.

·        Login your firebase account using firebase login  

·        Run the command firebase init hosting

·        Choose project or create new project

·        Select Default Public folder as public

·        Rewrite all URLs to Single page select Yes.

·        Delete index.html file in public folder. Otherwise, next js routing won't work.

In your Root folder you will see a firebase.json file. Now we are going to edit like this below.


  "hosting": {

    "public": "public",

    "site": "Your site name",

    "ignore": [





    "rewrites": [


        "source": "**",

        "function": "nextServer"




  "functions": {

    "source": ".",

    "runtime": "nodejs18"






Create server.js file in your root directory and paste the below code.

const { https } = require('firebase-functions');

const { default: next } = require('next');


constisDev = process.env.NODE_ENV !== 'production';


constserver = next({



    conf: { distDir:'.next' },



constnextjsHandle = server.getRequestHandler();

exports.nextServer = https.onRequest((req, res) => {


        .then(() => {

            returnnextjsHandle(req, res)





After configuring like above.  Now change your run scripts in package.json like this.


 "scripts": {

    "dev": "next dev",

    "build": "next build",

    "start": "next start",

    "lint": "next lint",

    "deploy": "firebase deploy --only functions,hosting"





After this run npm run build, now you will see .next folder in your project root directory.


And finally,  run the command deploy. And boom your will be deployed.

Leave Your Comment



Deploy next js in firebase
deploy next js project with ssr
next js with server side props deploy firebase
deploy next js application for free with all features
next js hosting for free server side rendering for free
hosting in firebase with server side generation next js

About us

Hey guys, This is Rajesh, A web developer. This platform was created to provide a space for individuals to share their thoughts, ideas, and experiences with the world. With Trusted News, users can easily create and manage your own blogs.