How to Build a SaaS with Next.js and Firebase

This tutorial walks through the foundation of a modern SaaS: a Next.js frontend backed by Firebase for authentication and data.

Prerequisites

• Node.js 20 LTS (or newer)
• A Firebase project in the Firebase Console
• Basic familiarity with React and TypeScript

Step 1: Create the Next.js app

npx create-next-app@latest my-saas --typescript --eslint --tailwind --app

Pick the App Router, TypeScript, and Tailwind when prompted — they match how this site is structured.

Step 2: Add Firebase

Install the web SDK:

npm install firebase

Initialize the client in a dedicated module (for example firebase/config.ts):

import { initializeApp, getApps } from "firebase/app";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};

export const app =
  getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];

Keep secrets in .env.local and never commit real keys to Git.

Step 3: Plan your data model

For a lean SaaS on the Firebase Spark plan, prefer:

• Firestore for structured documents (users, workspaces, usage counters).
• Firebase Auth for sign-in (email/link or OAuth providers).

Avoid storing large blobs in Firestore; use Firebase Storage for files.

Conclusion

You now have a minimal stack to iterate on: ship UI in Next.js, authenticate users, and persist state in Firebase. Next steps are defining security rules, indexing queries, and monitoring reads/writes so costs stay predictable.