Firebase Next.js Integration Strategies

Overview

Next.js 14+ App Router has a clear server/client boundary. This skill provides patterns for integrating Firebase's dual SDK model (Client SDK + Admin SDK) with Next.js execution environments.

Dual SDK Architecture

Client SDK (Client Components, Browser)

Use For:

• Client-side authentication (sign-in, sign-up, sign-out)
• Real-time listeners (onSnapshot)
• Client-side mutations with optimistic updates
• File uploads to Storage

Location: src/lib/firebase/client.ts