new blog app with next react with firebase firestore

14 tháng 7, 2024

Here’s a basic structure for your blog app using Next.js (App Router), React, Material-UI (MUI), and Firebase Firestore. This example includes features for fetching blogs from Firestore, filtering by tags, and supporting pagination.

Setting up Firebase Firestore

First, ensure you have set up Firebase in your Next.js project. Install the necessary dependencies:

npm install firebase
npm install @mui/material @emotion/react @emotion/styled

Create a firebase.js file to initialize Firebase:

// firebase.js
import { initializeApp } from "firebase/app";
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 db = getFirestore(app);

export { db };