Firebase with Next.js - Commands & Configuration

Introduction

Firebase is a service that helps you add backend features like databases and user login to your website. Next.js is a tool to build websites with React. Using Firebase with Next.js lets you easily add powerful features to your website without managing servers.

When you want to add user login and authentication to your Next.js website.

When you need a real-time database to store and show data instantly on your site.

When you want to host your Next.js website and backend together with minimal setup.

When you want to send notifications or messages to users from your website.

When you want to quickly add cloud functions to handle backend logic without servers.

Config File - firebase.json

firebase.json

{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

This file tells Firebase how to host your Next.js website.

• hosting.public: The folder with your built website files.
• ignore: Files and folders Firebase should skip.
• rewrites: Sends all requests to your main page so Next.js can handle routing.

Commands

This command installs the Firebase library so your Next.js app can use Firebase features.

Terminal

npm install firebase

Expected Output

+ firebase@9.22.1

added 1 package from 1 contributor and audited 1 package in 1.234s

found 0 vulnerabilities

Logs you into your Firebase account so you can manage your projects and deploy your app.

Terminal

npx firebase login

Expected Output

✔  Success! Logged in as [e-mail]

Starts Firebase setup for hosting your Next.js website. You choose your project and set the public folder.

Terminal

npx firebase init hosting

Expected Output

=== Hosting Setup ===

? Select a default Firebase project for this directory: example-project

? What do you want to use as your public directory? out

? Configure as a single-page app (rewrite all urls to /index.html)? Yes

Firebase initialization complete!

Builds your Next.js website and exports it as static files in the 'out' folder for Firebase hosting.

Terminal

npm run build && npm run export

Expected Output

info  - Creating an optimized production build...

info  - Exporting static pages

Export successful. Files written to out/

Uploads your built website files to Firebase so your site is live on the internet.

Terminal

npx firebase deploy

Expected Output

=== Deploying to 'example-project'...



i  deploying hosting

i  hosting[example-project]: beginning deploy...

✔  hosting[example-project]: deployed hosting files



✔  Deploy complete!



Project Console: https://console.firebase.google.com/project/example-project/overview

Key Concept

If you remember nothing else from this pattern, remember: Firebase hosting serves your built Next.js site files, and Firebase tools help you build, login, and deploy easily.

Common Mistakes

Not running 'npm run build' and 'npm run export' before deploying.

Firebase needs the built static files in the 'out' folder to host your site. Without building, there are no files to upload.

Always run 'npm run build && npm run export' to prepare your site before 'firebase deploy'.

Setting the wrong public directory during 'firebase init hosting'.

If the public directory is not 'out', Firebase won't find your built site files and deployment will fail or show an empty site.

Set the public directory to 'out' when asked during Firebase hosting initialization.

Skipping 'npx firebase login' before deploying.

Without logging in, Firebase CLI cannot access your projects and deployment will fail.

Run 'npx firebase login' once before deploying to authenticate your CLI.

Summary

Install Firebase library to use its features in your Next.js app.

Build and export your Next.js site to static files in the 'out' folder.

Initialize Firebase hosting with 'out' as the public directory.

Login to Firebase and deploy your site files to make your website live.