In this article, we will walk you through the process of hosting a Next.js Server-Side Rendered (SSR) React app on Cloud Functions for Firebase using Firebase Hosting.

Here is the accompanying Medium Post that outlines the new project structure and offers insight into Firebase’s partial deployments and support for pre/post-deploy hooks.

Why Host on Cloud Functions?

Using Cloud Functions allows you to create a low-cost, auto-scaling SSR application, taking full advantage of Firebase’s developer-friendly ecosystem.

Getting Started: How to Host Your SSR Next.js App

Utilizing Firebase Hosting, we can rewrite routes to a Cloud Function where our Server-side Rendered Next.js app resides. We’ll create a rewrite rule to catch **ALL** routes, enabling us to serve the app through our Firebase Hosting URL instead of the Cloud Function URL.

For example, instead of accessing:

• Cloud Function URL

We can simply use:

• Firebase Hosting URL

Next.js Advantages

By implementing Next.js, you unlock benefits such as:

• Hot-Module Reloading
• Server and Client-side Routing
• Route Level Code-Splitting
• Route Prefetching

This new method addresses several issues associated with hosting SSR on Firebase. For more details, please refer to the Medium Post.

Installation Steps

bash
git clone https://github.com/jthegedus/firebase-functions-next-example
cd firebase-functions-next-example
yarn install

Login to Firebase CLI

This is used as a development dependency instead of a global installation for a smoother experience.

bash
yarn firebase login

Next.js Development

Standard Next.js development can proceed with:

bash
yarn dev

Local Testing

To test locally, run:

bash
yarn serve

Note: Ensure you have a valid Firebase project ID defined in the .firebaserc file for the serve command to verify your project exists.

Deploying Your Application

1. Deploy Hosting Resources and the Rewrite Cloud Function

bash
yarn deploy-app

2. Deploy Functions Not Used for SSR

bash
yarn deploy-funcs

3. Deploy Everything to Firebase

bash
yarn deploy-all

Cleaning Up

bash
yarn clean

Troubleshooting Tips

While deploying your application, you may encounter a few common issues:

• If you see the error Cannot find module @babel/runtime/regenerator..., make sure to install it directly in your project.
• Ensure you are using Node version 6.11.5 or later for compatibility with Firebase functions.
• If you are using npm instead of Yarn and encounter issues, consider changing scripts to run the firebase binary from the node_modules/.bin folder.

For ongoing support and to keep up with innovative developments, connect with our community at fxis.ai.

A Final Note on Compatibility

This project has been tested on Ubuntu 17.04 with Bash. Compatibility on other platforms (like Windows or macOS) may vary, and feedback is welcome to improve support. For details about the development environment, you can check my dotfiles.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.