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 ...
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.
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
- Go to your project and initiate Firebase
- 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 -
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,
// 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 -
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.
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
Loading comments...