Firebase Project Setup

Setting up Firebase is a simple three-step process: Create a project, register your app, and install the SDK.

1. Create a Firebase Project

1. Go to the Firebase Console.
2. Click "Add Project" and enter a name.
3. (Optional) Enable Google Analytics for your project.
4. Click "Create Project".

2. Register Your App

Firebase supports multiple platforms. For this tutorial, we focus on Web.

1. In the center of the project overview page, click the Web icon (</>).
2. Enter an app nickname and click "Register app".
3. You will see your firebaseConfig object. Copy this; you'll need it soon.

3. Install Firebase SDK

In your Next.js project directory, run the following command:

npm install firebase

4. Initialize Firebase

Create a file named lib/firebase.js to initialize the app:

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

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

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Services
export const db = getFirestore(app);
export const auth = getAuth(app);
export default app;