Next.js+Firebase
Stack Integration

Next.js + Firebase Integration Guide

Firebase Auth and Firestore integrate cleanly with Next.js App Router, but server components require the Firebase Admin SDK — not the client SDK.

Use Cases
  1. Firebase Auth with session cookies for server-side route protection
  2. Firestore reads in Next.js Server Components via Admin SDK
  3. Client-side real-time Firestore listeners in client components
  4. Cloud Functions triggered by Firestore writes, called from Next.js API routes
Implementation

Two Firebase SDKs in play: firebase (client-side, for Auth UI and real-time listeners) and firebase-admin (server-side, for Server Components and Route Handlers). Initialize admin once in a singleton module. Session management: use Firebase Auth + a session cookie verified server-side via admin.auth().verifySessionCookie(). Never put service account credentials in client components or expose them to the browser — admin SDK is server-only.

Need this built?