Next.js+Firebase
Stack IntegrationNext.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
- Firebase Auth with session cookies for server-side route protection
- Firestore reads in Next.js Server Components via Admin SDK
- Client-side real-time Firestore listeners in client components
- 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.