Deploy Next.js to Firebase Cloud Functions via Github Actions

React.js + CDN + SSR + CI/CD + Serverless = ❤️

This article is about how to deploy a Next.js project to Firebase Cloud Function and Firebase Hosting. The technologies in this article include

• Next.js
• Firebase Cloud Functions && Firebase Cloud Hosting
• Github Action
• (Optional) Tailwind CSS

Prerequisites

• A Firebase Project: Your project must be on the Blaze (pay as you go) to use Firebase Cloud Functions according to the official pricing plan. The free usage limit is very generous.
• A Github Account: For Github Actions

Part 1: Prepare your Next.js project

a. Create Sample Project
You can run yarn create next-app in CLI to generate a simple Next.js app. The following is what you’ll have:

.
├── README.md
├── package.json
├── pages
│   ├── _app.js
│   ├── api
│   │   └── hello.js // http://localhost:3000/api/hello
│   └── index.js // http://localhost:3000/
├── public
│   ├── **
├── styles
│   ├── Home.module.css
│   └── globals.css
└── yarn.lock

Since Next.js supports the srcfolder. I’ll suggest moving pages/, styles/ , and potential components/ under src folder for tidiness.

Now you can start it with yarn dev and view it through http://localhost:3000/

Note: We will use the sample API /api/hello to test Firebase Cloud Functions later.

b. Prepare Next.js for Firebase
The goal here is to prepare the Next.js project for Firebase Cloud Function

First, add related packages for Firebase

yarn add firebase-functions firebase-admin

then create src/firebaseApp.js to wrap your Next.js app into a “Cloud Function.”

Wrap next.js app for Firebase Cloud Functions

Note: The export name “nextApp” here is customizable. It will become the function name under your Firebase Cloud Functions console.

c. Test Build for production
To test if your project is ready to deploy, we have to build the project and export the static resources. Create an empty next.config.js under your project root.

module.export = {
  // distDir: './build',
  // outDir: './out'
}

Then run the following command to build and export your app

npx next build && npx next export

You will notice build and out two folders are created. We will use them in the deployment phase in Part 3.

Part 2: (Optional) Install Tailwind CSS

In this part, we are following the official Tailwind CSS guideline to create configurations and create a simple page with Tailwind CSS's power. You can skip this part if you’re not going to use Tailwind CSS.

a. Install related packages; it will createtailwind.config.js and postcss.config.js .

yarn add tailwindcss@latest postcss@latest autoprefixer@latest -D
npx tailwindcss init -p

b. Edit tailwind.config.js Config the purge to includes all the pages or components for the tree shaking production build.

purge: ['./src/pages/**/*.{js,jsx}'], // the pages are under ./src

c. Replace the content ofstyles/global.css with the following Tailwind CSS directives

@tailwind base;
@tailwind components;
@tailwind utilities;

d. Create a simple page with Tailwind CSS style, so your/pages/index.js will look like this:

A Tailwind CSS sample page

You can now test it locally to make sure the styling is working.

http://localhost:3000

Part 3: Deploy to Firebase

The firebase-tools provides CLI tools for us to run firebase * commands with some interactive options for deployment. In this article, we will create the necessary configs manually.

Use the following command to install the CLI tool and login into Firebase. (If you’re in a remote machine or under CI, refer to official instructions)

npm install -g firebase-tools
npx firebase login

1. Config Firebase settings

Add .firebaserc and firebase.json

• .firebaserc — This file contains your Firebase Project ID. You can find it through npx firebase projects:list

.firebaserc

firebase.json— This file provides all the deployment information. In the -hosting settings

• publicis the folder we exported our static resource in Part 1, and all the files will be publicly accessible.
• cleanUrls It is a must to make sure all the .html will be dropped.

firebase.json

2. Edit the package.json

Config the main script and some useful npm script in your package.json

...
"main": "src/firebaseApp.js",
"scripts": {
    "dev": "next dev",
    "debug": "NODE_OPTIONS='--inspect' next dev",
    "build": "next build && next export",
    "deploy": "firebase deploy --only functions,hosting",
    "start": "next start"
}
...

Now you’re ready to go

yarn build && yarn deploy

Now you should be able to view it through your Firebase Hosting URL

🙌 deployed!

Part 4: Configure GitHub Actions

We are going to make all the PR and push on the main branch to deploy to Firebase.

First, you can obtain the Firebase token through the following command.

npx firebase login:ci

Then add the token to your project Settings → Secrets → [New Repository Secret] under the name FIREBASE_TOKEN

Then add the workflow YAML file to your project under .github/workflows/

Once you push the above workflow to Github, you can see the Github Action is running, and that’s it!! 🎉

Can I use this project with one click?

The full code of this project — plus some other goodies! is available at https://github.com/ryanhanwu/next-firebase-actions. Clone the project or hit the Use this Template button to hit the ground running. 🏃🏃

Conclusion:

If you find this article useful as a guide to deploying your Next.js app running on the Google Firebase Cloud Functions via Github Actions, give an 👏 and leave your questions in the comment section. I’d love to answer them.