Next.js Setup

Set up Refirebase in a Next.js App Router project.

Environment variables

Next.js requires the NEXT_PUBLIC_ prefix for client-accessible variables. Refirebase reads both FIREBASE_* and NEXT_PUBLIC_FIREBASE_* automatically.

.env.local

# .env.local
NEXT_PUBLIC_FIREBASE_API_KEY=AIza...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=...
NEXT_PUBLIC_FIREBASE_PROJECT_ID=...
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=...
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=...
NEXT_PUBLIC_FIREBASE_APP_ID=...
NEXT_PUBLIC_FIREBASE_DATABASE_URL=...

# Server / Admin SDK
FIREBASE_PROJECT_ID=...
FIREBASE_CLIENT_EMAIL=...
FIREBASE_PRIVATE_KEY=...

Singleton instance

Create one shared instance and export db, auth, and analytics from it.

lib/firebase.ts

// lib/firebase.ts
import { Refirebase } from 'refirebase';

// Singleton pattern — safe for Next.js
const refirebase = new Refirebase();
export const { db, auth, analytics } = refirebase;

React Provider (Client Components)

Wrap your app in RefirebaseProvider inside a 'use client' component so hooks work throughout the app.

app/layout.tsx

// app/providers.tsx
'use client';

import { RefirebaseProvider } from 'refirebase/react';
import { refirebase } from '@/lib/firebase';
import type { ReactNode } from 'react';

export function Providers({ children }: { children: ReactNode }) {
  return (
    <RefirebaseProvider instance={refirebase}>
      {children}
    </RefirebaseProvider>
  );
}

// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Server Components

Use db directly in Server Components for SSR data fetching — no provider needed.

Server Component

// app/users/page.tsx (Server Component)
import { db } from '@/lib/firebase';

export default async function UsersPage() {
  const users = await db.firestore.get('users');
  return <ul>{users?.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

💡

The Admin SDK (refirebase/admin) is recommended for server-side privileged operations. Use the client SDK for SSR-only data reads.

← PreviousFirebase Emulators Next →Expo Setup