Deploy Next.js Application with SSR using Firebase Cloud Functions
By: Sudeep Timalsina
Tags: React, Server Side Rendering, Deployment, Nextjs, Firebase Cloud Functions

Next.js is gaining its popularity among the react lovers because of its very useful and interesting features. Most of us use next.js for server side rendering, page based easy routing and many more. After building an application, we are always concerned with deploying the application in some cloud environments.

Firebase provides different services like authentication, real time database, hosting, etc. I have already written an article about Deploying next.js application using firebase hosting. Today I will be explaining about Deploying next.js application with SSR using firebase cloud functions. So, let’s start our implementation with a new project.

Create Next.js Project

First of all, let’s create a project for deploying it to firebase and let’s name it as next-ssr-deploy .

mkdir next-ssr-deploy

cd next-ssr-deploy

Now create package.json with all defaults.

yarn init -y

Also add following scripts to package.json .

//package.json "scripts": {

"dev": "next",

"build": "next build",

"start": "next start"

},

Install React, React Dom and Next

Now, we install React , React Dom and Next for our project with the following command.

yarn add react react-dom next

Add two more packages cross-env and isomorphic-unfetch that we will be using later on.

yarn add cross-env

yarn add isomorphic-unfetch

Add Page Layout

We are going to add a page layout with a simple navbar for navigating to Home and About page later on. So, first of all create components folder on the root of the project for adding components. Inside components folder create navbar.js file and we add two of the navigation here.

Also we create the layout component for adding page layout. So, let’s create layout.js file inside components folder and following code. We add bootstrap CDN to style our page little bit, but we are not focusing to styling stuffs in this article.

Add Pages With SSR

For this test application to deploy the next.js project with firebase function, we are going to add two pages, one is index/landing page and another is simple about page. We are going to fetch some data in index page with getInitialProps. We will be using a public api to fetch some products. Don’t forget to create pages folder and inside create index.js page and use following code.

Also create about.js page inside pages folder. We just write some info text in this page.

Firebase Setups

With the simple pages up there, we have to now navigate to the firebase console and start working with firebase.

Create Project

We now add new project named next-ssr-deploy. You can follow the similar 3 steps for your project setup in firebase. Wow, so much easier steps.

After the third step, we have created the new firebase project and now we are all set for using the project. One of the important thing you need to keep in mind is that you need to upgrade your firebase project from SPARK plan to BLAZE plan to use the feature of Firebase Cloud Functions. You have to setup billing account information for upgrading your account.

After successfully upgrading the firebase project account to BLAZE plan, you will see the plan change reflected like the same in snapshot below.

Firebase initialize

Install firebase-tools

The Firebase Command Line Interface (CLI) Tools can be used to test, manage, and deploy our Firebase project from the command line. We will be able to use firebase CLI commands after installing firebase-tools.

npm install -g firebase-tools

Here we install two more packages that you will be asked to install while deploying firebase-functions and firebase-admin with following commands.

yarn add firebase-admin

yarn add firebase-functions

Also, most importantly our package.json file now should become like below. We will use the deploy command to deploy our application to the cloud function.

Firebase Initialize

Now, its time to initialize the firebase project. To initialize firebase project use firebase init command given below. First of all choose Hosting option.

firebase init

Choose use existing project and select the related project (in our case next-ssr-deploy).

Then have the default public option.

You can select No in the last one.

We have successfully initialize firebase in our project. Wow!

Now you will see the firebaserc file and firebase.json file in the project.

Update firebase.json

For deploying the next.js application using firebase cloud functions, we will be updating the configurations as of below in firebase.json.

Firebase Cloud Function

We now add file function.js to the root of the project for making custom server for out test project with following configurations. Remember one thing, that the name of the server nextServer on line 12 must match to the rewites function in firebase.json.

Delete index.html file inside public

This is most important thing that we may neglect and get into the trouble many times. We need to delete the index file inside of the public folder that we made during firebase initialize. Let’s delete index.html and 404.html from the public folder to ensure that our cloud function works in the end.

Build and Deploy

For making it easy, I have added build and deploy in same command in package.json. So, let’s try deploying with following command.

yarn deploy

Folder structure in the end must be like:

Folder Structure

DEMO

Boom! You will see the hosted application when you navigate to the url after deploy is successful. We have now successfully deployed the next.js application with SSR using firebase cloud functions.

Home page

About page

Here we have deployed the simple next.js application with Server Side Rendering using Firebase Cloud Functions. If you are stuck somewhere in the code, I have provided the github link to you to observe the code. If you have any problem with Deployment of your next.js application with firebase functions, please let me know in the comment below.

See you in next article.

Github Link:

https://github.com/SudeepTimalsina/next_ssr_deploy