FirebaseHow-ToBeginner · 4 min read

How to Add Firebase to Next.js App: Simple Setup Guide

To add Firebase to a Next.js app, install the Firebase SDK with npm install firebase, then create a Firebase config file to initialize the app using your Firebase project credentials. Import this config in your Next.js pages or components to use Firebase services like authentication or database.

📐

Syntax

Here is the basic syntax to initialize Firebase in a Next.js app:

import { initializeApp } from 'firebase/app': Imports the function to start Firebase.
const firebaseConfig = { ... }: Your Firebase project settings.
const app = initializeApp(firebaseConfig): Initializes Firebase with your config.

javascript

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);

export default app;

💻

Example

This example shows how to set up Firebase in a Next.js app and use Firebase Authentication to sign in anonymously.

javascript

import { useEffect, useState } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, onAuthStateChanged } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export default function Home() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    signInAnonymously(auth).catch(console.error);
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => unsubscribe();
  }, []);

  return (
    <div>
      <h1>Firebase with Next.js</h1>
      {user ? <p>Signed in as: {user.uid}</p> : <p>Signing in...</p>}
    </div>
  );
}

Output

<div> <h1>Firebase with Next.js</h1> <p>Signed in as: some-unique-user-id</p> </div>

⚠️

Common Pitfalls

Common mistakes when adding Firebase to Next.js include:

Not protecting Firebase config keys — these are safe to expose as they are public, but keep private keys secure.
Initializing Firebase multiple times causing errors — always check if Firebase is already initialized.
Using Firebase client code on the server side in Next.js causing errors — only use Firebase in client components or inside useEffect.

javascript

/* Wrong: Initializing Firebase inside a component without checking */
import { initializeApp } from 'firebase/app';

const firebaseConfig = { /* config */ };

const app = initializeApp(firebaseConfig); // This runs every render - bad

export default function Page() {
  return <div>Page</div>;
}

/* Right: Initialize once in a separate file and import */
// firebaseConfig.js
import { initializeApp, getApps } from 'firebase/app';

const firebaseConfig = { /* config */ };

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

export default app;

📊

Quick Reference

Tips for adding Firebase to Next.js:

Install Firebase SDK: npm install firebase
Initialize Firebase once in a separate file.
Use Firebase client APIs inside React hooks or client components.
Protect sensitive keys; Firebase config keys are safe to expose.
Use environment variables for config values in production.

✅

Key Takeaways

Install Firebase SDK and initialize it once with your project config.

Use Firebase only in client-side code or React hooks to avoid server errors.

Avoid multiple Firebase initializations by checking existing apps.

Firebase config keys are safe to expose but keep private keys secure.

Use environment variables for config in production for better security.