Guide to Firebase Hosting

A step-by-step guide to deploying static Next.js website to Firebase Hosting with GitHub Actions.

Prerequisites

Before starting, make sure you have the following prerequisites:

A Firebase project
A GitHub repository
Node.js installed

Step 1: Install Firebase Tools

Run the command below on the project's root directory to install Firebase Tools locally:

npm install firebase-tools -D

Install Firebase tools locally ensures consistency across environments and avoids version conflicts.

Step 2: Initialize Firebase Hosting

Run the command below, which prompts you to authenticate with Firebase using your Google account:

npx firebase login

Make sure to use the same Google account associated with the Firebase project.

Next, run the command below and complete the initialization for Firebase Hosting:

npx firebase init hosting

The default public directory is build for React.js, and out for Next.js.

The single-page app option is Yes for React.js, and No for Next.js.

The automatic builds and deploys with GitHub Actions option should be No. It will be added later.

Then, modify the next config file to enable static export:

// next.config.ts
const nextConfig: NextConfig = {
  output: 'export'
};

And also modify the firebase.json file by adding the code section below in the hosting section to prevent the routing issue on refresh for static Next.js websites deployed to Firebase Hosting:

{
  "hosting": {
    ...,
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "/**", 
        "dynamicLinks": true
      }
    ]
  }
}

Lastly, run the following commands to build and deploy the project to Firebase Hosting:

npm run build

npx firebase deploy --only hosting

The .firebaserc and firebase.json files are Firebase configuration files. .firebaserc contains project deployment configurations, while firebase.json defines server settings, redirects, and headers.

Step 3: Setup GitHub Actions (Optional)

You may setup GitHub Actions to deploy your website to Firebase Hosting when there are changes pushed to the GitHub repository.

Run the command below and complete the setup for GitHub Actions:

npx firebase init hosting:github

Select Yes for the Setup build workflow.

Enter the build script npm install & npm run build.

The Auto-deploy on PR merge option is optional. Choose as per project requirements.

Step 4: Push to GitHub

Commit and push the code to the GitHub repository to trigger the GitHub Actions workflow (if configured) or deploy manually using the Firebase CLI in Step 2.

That's it! The static Next.js website is now hosted on Firebase Hosting with automated deployment via GitHub Actions.