# Integrating Next.js with Firebase

Firebase is a powerful backend-as-a-service platform that offers authentication, real-time databases, and hosting. Integrating Firebase with a Next.js application allows you to build scalable and serverless web applications with ease.

---

## Why Use Firebase with Next.js?

* **Authentication**: Secure user authentication with Firebase Auth.
    
* **Realtime Database & Firestore**: Sync data across clients instantly.
    
* **Hosting**: Deploy your Next.js app seamlessly using Firebase Hosting.
    
* **Serverless Functions**: Extend backend logic with Firebase Cloud Functions.
    

---

## Setting Up Firebase in Next.js

### Step 1: Create a Firebase Project

1. Go to [Firebase Console](https://console.firebase.google.com).
    
2. Click **Add Project** and follow the setup steps.
    
3. Once created, go to **Project Settings** and get your Firebase credentials.
    

### Step 2: Install Firebase SDK

Navigate to your Next.js project and install Firebase:

```bash
npm install firebase
```

### Step 3: Configure Firebase

Create a `firebaseConfig.ts` file inside the `lib/` folder:

```typescript
// lib/firebaseConfig.ts
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
```

Add the environment variables in `.env.local`:

```plaintext
NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-auth-domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-storage-bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id
```

---

## Implementing Firebase Authentication

### Step 4: Create a Login Component

Create a simple authentication component using Firebase Auth:

```typescript
// components/Login.tsx
import { useState } from "react";
import { auth } from "../lib/firebaseConfig";
import { signInWithEmailAndPassword, signOut } from "firebase/auth";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleLogin = async () => {
    try {
      await signInWithEmailAndPassword(auth, email, password);
      alert("Logged in successfully");
    } catch (error) {
      console.error("Error logging in:", error);
    }
  };

  const handleLogout = async () => {
    await signOut(auth);
    alert("Logged out");
  };

  return (
    <div>
      <input type="email" placeholder="Email" onChange={(e) => setEmail(e.target.value)} />
      <input type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
      <button onClick={handleLogin}>Login</button>
      <button onClick={handleLogout}>Logout</button>
    </div>
  );
}
```

### Step 5: Protect Routes Using Middleware

To restrict access to authenticated users, use Next.js middleware:

```typescript
// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(req: NextRequest) {
  const token = req.cookies.get("auth-token");
  if (!token) {
    return NextResponse.redirect(new URL("/login", req.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: "/dashboard/:path*",
};
```

---

## Deploying Next.js with Firebase Hosting

### Step 6: Install Firebase CLI

If you haven’t installed Firebase CLI, run:

```bash
npm install -g firebase-tools
```

Login and initialize Firebase in your project:

```bash
firebase login
firebase init hosting
```

Choose:

* **Use an existing project** (Select your Firebase project)
    
* **Build directory**: `.next`
    
* **Configure as a single-page app**: No
    
* **Set up automatic builds**: No
    

### Step 7: Deploy

Build your Next.js app and deploy it:

```bash
npm run build
firebase deploy
```

---

## Conclusion

Integrating Firebase with Next.js enables seamless authentication, database management, and hosting. With Firebase’s real-time capabilities and serverless infrastructure, you can build scalable web applications efficiently. Try Firebase to enhance your Next.js project with powerful backend functionalities!

For more details, check out the official documentation:

* [Firebase Docs](https://firebase.google.com/docs/guides?_gl=1*f8626b*_up*MQ..&gclid=Cj0KCQiAwOe8BhCCARIsAGKeD57VcSc8l7fAJbJK6qj7O2Sdrfbv1B8mmTF1XXfWayN7kix1Zaxbh5saAqrIEALw_wcB&gclsrc=aw.ds)
    
* [Next.js Docs](https://nextjs.org/docs/app/getting-started/installation)