Deploying Next.js Application on Firebase Platform using Cloud Function with Firebase Hosting.
By: Dipesh K.C.
Tags: JavaScript, Programming, Deployment, Nextjs, Firebase

Deploying Next.js Application on Firebase Platform using Cloud Function with Firebase Hosting.

Cloud Function | Firebase Hosting | Static Deployment| getServerSideProps

1. Overview

Deploying static websites like React Applications on the Firebase Platform is very straightforward. But that was not the case with Next.js Projects. This is because Next.js Application requires a server to handle server rendering. So deploying just static HTML is not sufficient. Here in this article, I will demonstrate the deployment of a Next.js project to the firebase platform using cloud Function and Firebase Hosting.

Visit my other article if you want to deploy your Next.js Application on Google App Engine.

2. Preparing a basic Next.js App

Let's prepare a simple Next.js application to deploy on the Firebase.

yarn create next-app

Here I use yarn to bootstrap a Next.js application.

I will name my project as next-deploy .

This is the initial folder structure we get by running the above command.

Now lets edit pages/index.js file to write a basic sample code.

Let me explain this code briefly.

[Line 16–18]: We are passing props ssrWorking through getServerSideProps .

through . [Line 4–15]: We are displaying a success image if the props passed through getServerSideProps is present. [JUST TO CHECK IF SSR IS WORKING DURING DEPLOYMENT]

Running App Locally

If we run yarn dev on our project, it runs successfully as expected.

Starting Deployment Process

Option 1: Static Deployment with Firebase Hosting

We can deploy our app simply using Static HTML Export with next build && next export command.

next export command prerender all our pages under pages folder to static HTML pages. So it will run without the need of a Node.js server. But this simplicity comes with the cost. It now does not support getServerSideProps within our pages as it requires a server.

So if you want SSR functionality, follow Option 2.

Option 2: Using the Firebase Cloud Function along with Firebase Hosting

Firebase Setup (Part 1 - on Firebase Console)

Let's start by setting the Firebase project by going to the firebase console.

Select Add Project on your console.

Enter your Project Name and press continue. Similarly, select continue for step 2 and step 3 and click create Project . The following page appears confirming the project is successfully setup.

Now we can navigate to our firebase dashboard by clicking on the currently created project on the console.

Here, on the left bottom section on the dashboard, we see the plan we are currently using. The default one is Spark .

We need to upgrade to choose Blaze (Pay as you go) Plan in order to use cloud Function Functionality.

This is the only configuration we need on the firebase console.

Firebase Setup (Part 2 - on our Next.js Project)

Now we go back to our Next.js Project. We start by installing the firebase tools to be able to run firebase CLI commands.

npm install -g firebase-tools

Then we connect our Next.js project with the firebase project we just created by the following command.

firebase login

Now we have access to all the firebase projects associated with the login account. We now initialize firebase on our project using

firebase init

We will only select Hosting Feature. We will not select Firebase Functions because we will be doing manually for simplicity.

Now we select existing projects as we have already created project through firebase console.

And select the project we just created on the console.

We select public and No for subsequent questions. That's it. We have set up a firebase on our Next.js Project.

Manual Firebase Configuration

Firebase.json

This is the default firebase.json . Now we edit our firebase.json file to our requirements.

Let me explain this code briefly.

[Line 1–11]: Includes hosting related configuration.

[Line 3–4]: public defines the files in our project directory that should be deployed and ignore defines the files that should be ignored during deployment.

defines the files in our project directory that should be deployed and defines the files that should be ignored during deployment. [Line 5–10]: We include the rewrite rule in the case if the request to files or directories through URL doesn’t exist on the public folder. In such a case we execute nextServer cloud function to determine the response. [We will be creating this function soon]

cloud function to determine the response. [We will be creating this function soon] [Line 12–15]: Includes cloud function related configuration.

[Line 13]: source indicates the location of our nextServer function.

indicates the location of our function. [Line 14]: runtime indicates the Node.js runtime version to run our nextServer function.

Cloud Function

Now we write our custom server code on function.js file on the root of the project.

Let me explain this code briefly.

[Line 4]: Here we are checking if we are running the application in a development or production environment to later provide the information to the next function on Line 7.

[Line 6–10]: Here we connect our custom Server to our Next.js Application by providing the location of .next folder generated after running yarn build command in our root Next.js application to the conf option o the next function.

folder generated after running command in our root Next.js application to the option o the next function. [Line 12]: server.getRequestHandler returns a request handler which we can use to parse all HTTP requests.

returns a request handler which we can use to parse all HTTP requests. [Line 13]: server.prepare makes our Next.js build code(.next) ready to run on our custom server for handling SSR.

Note: The name of the function we exported here i.e nextServer on line 12 should match the function name we previously declared on firebase.json on line 8.

Our Folder Structure looks like this now.

Let's Try Deploying [Try 1]

Let us try our luck in deploying the project now.

//first install all the required pacakages we will be using

1. yarn add firebase-admin firebase-functions cross-env //build our Next.js project to generate .next folder

2. yarn build //Now deploy with production environment

3. cross-env NODE_ENV=production firebase deploy — only functions,hosting

Hard luck :(

Improve Our Configuration

The above problem states that the index.js file doesn't exist on the root folder. So cloud function deployment failed.

Why is it searching index.js file in the first place?

This was because we provided “.” to the source function property on Line 13 on firebase.json . So it is looking at the main key on the root package.json for cloud function. Since we did not previously define main key on package.json file, it defaults to index.js .

package.json

Let me explain this code briefly.

[Line 4]: We provide our function file function.js on the main key.

on the key. [Line 10]: We add the deploy script to build and deploy the project.

Let’s Try Deploying [Try 2]

Now I think we are OK with all the configuration stuff. Let's try the deployment for the second time.

//builds the app and deploy

yarn deploy

Yesss :) deployment completed with success. It also gives us the Hosting Url where it is deployed. Let's try it.

Wait!!! What is this webpage we are seeing? This is not the webpage we designed earlier :(

Why did it fail?

Remember the public folder that was generated during firebase.init process. It contains the index.html on it with the above webpage code. So the request was handled by the index.html file on public folder instead of function we wrote.

So, delete the index.html file on the public folder and deploy again using yarn deploy . The deployment succeeds this time too. We can confirm the deployment on the firebase console.

Functions Section on Firebase Dashboard

Hosting Section on Firebase Dashboard

Now if we go to the deployed URL, we see our designed website. And SSR is also working too.

CONCLUSION

If you get lost on any part you can check my Github project.

https://github.com/dipesh429/nextjs-firebase-cloud-function-deploy

That’s it for this article. This is the end of our short journey to deploying Next.js Application on Firebase Platform using Cloud Function with Firebase Hosting. Hope this will help you with your project. Any kind of suggestions would be highly appreciable. Happy Coding ☺.