How to Use Firebase with Next.js: Simple Integration Guide

To use Firebase with Next.js, install Firebase SDK, initialize it in a module, and import it where needed. Use Firebase services like Authentication or Firestore inside your Next.js components or API routes for backend logic.

Syntax

First, install Firebase SDK with npm install firebase. Then create a Firebase config file to initialize the app with your project credentials. Import this config in your Next.js pages or API routes to use Firebase services.

Example parts explained:

• initializeApp(config): Starts Firebase with your project settings.
• getAuth(): Gets Firebase Authentication service.
• getFirestore(): Gets Firestore database service.

javascript

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

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);
const db = getFirestore(app);

export { auth, db };

Example

This example shows how to initialize Firebase and use Authentication in a Next.js page to sign in a user with email and password.

javascript

import { useState } from 'react';
import { auth } from '../firebaseConfig';
import { signInWithEmailAndPassword } from 'firebase/auth';

export default function SignIn() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');

  const handleSignIn = async () => {
    try {
      await signInWithEmailAndPassword(auth, email, password);
      setMessage('Signed in successfully!');
    } catch (error) {
      setMessage('Error: ' + error.message);
    }
  };

  return (
    <div>
      <h1>Sign In</h1>
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <button onClick={handleSignIn}>Sign In</button>
      <p>{message}</p>
    </div>
  );
}

Output

A simple sign-in form that shows success or error messages after clicking the Sign In button.

Common Pitfalls

Common mistakes when using Firebase with Next.js include:

• Initializing Firebase multiple times causing errors. Always initialize once in a separate module.
• Exposing sensitive Firebase config in client code. Firebase config is safe to expose but keep private keys secure.
• Using Firebase client SDK in Next.js API routes (server-side) without proper environment setup.
• Not handling asynchronous Firebase calls properly causing UI issues.

javascript

/* Wrong: Initializing Firebase inside a component causes multiple instances */

import { initializeApp } from 'firebase/app';

export default function Page() {
  const app = initializeApp({ /* config */ }); // BAD: runs on every render
  return <div>Hello</div>;
}

/* Right: Initialize once in a separate file and import */

// firebaseConfig.js
import { initializeApp } from 'firebase/app';
const app = initializeApp({ /* config */ });
export default app;

Quick Reference

Tips for smooth Firebase and Next.js integration:

• Initialize Firebase once in a dedicated file.
• Use Firebase client SDK in React components for frontend features.
• Use Firebase Admin SDK in Next.js API routes for secure backend operations.
• Keep Firebase config in environment variables for flexibility.
• Handle async Firebase calls with async/await or Promises.

Key Takeaways

Initialize Firebase once in a separate module and import it where needed.

Use Firebase client SDK in Next.js components for frontend features like authentication.

Avoid multiple Firebase app instances by not initializing inside components.

Use async/await to handle Firebase calls smoothly in Next.js.

Keep sensitive keys secure and use environment variables for config.