Host a Next.js SSR React app on Cloud Functions for Firebase with Firebase Hosting.
Here is the accompanying Medium Post A new post is being written to describe the new project structure, Firebase partial deployments, Firebase support of pre/post-deploy hooks and what problems these new features solve.
Host your SSR Next.js app on Cloud Functions enabling a low-cost, auto-scaling SSR app experience leveraging Firebase's sweet developer experience.
Firebase Hosting can rewrite routes to a Cloud Function that serves our Server-side Rendered Next.js app. Using a rewrite rule that catches ALL routes we can then host our SSR app on our Firebase Hosting URL instead of the Firebase Cloud Function URL.
instead of:
https://us-central1-<project-name>.cloudfunctions.net/<function-name>
we can use:
<project-name>.firebaseapp.com/
Next.js can then be used to achieve SSR React with Hot-Module Reloading, server and client-side routing, route level code-splitting, route prefetching and more!
A number of issues with Hosting SSR on Firebase were overcome with this method. Please refer to the Medium Post before creating issues here.
This example uses firebase-tools
as a devDependency which is run from the node_modules/.bin/
folder via yarn
. Yarn will run scripts from either the package.json
or binary scripts from node_modules/.bin/
. npm run
does not check the .bin
folder for executables, so if you use npm
you will either have to change the scripts to explicitly run the firebase
binary from node_modules/.bin/
or install firebase-tools
globally and remove it from the devDeps list.
git clone https://github.com/jthegedus/firebase-functions-next-example
cd firebase-functions-next-example
yarn install
This is used as a dev-dependency instead of a global install. I've found this to be a much nicer dev experience.
yarn fblogin
Standard Next.js development with Hot-module Reloading etc
yarn dev
Unfortunately I have been unable to get any combination of
firebase serve --only functions,hosting
to work as expected. This issue is where solutions are being explored and they will be shared here and on the Next.js repo's similar issue when discovered.
In the meantime you'll just have to do a full deployment and test online. The new project structure of v2.0.0 and partial deployments reduces the deployment time significantly so this is not too bad. I'm continually looking into a solution to this.
You will need to connect the project to your Firebase project. Edit the name in .firebaserc or run firebase init
and choose not to override any files.
yarn deploy-app
Deploy all functions specified in the function group. Edit this script to add more function groups. - see Partial deploys docs for how to use function groups.
yarn deploy-funcs
yarn deploy-all
yarn clean
Everything was tested on Ubuntu 17.04 with Bash. This should work on Bash on Ubuntu on Windows without any changes. If you wish for Windows native support please submit an issue so we can work on Windows compatibility. Please report any macOS errors as I do not have access to a device to test. My development environment can be found here.