6:[["$","$Lc",null,{"id":"json-ld","type":"application/ld+json","strategy":"lazyOnload","children":"{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"headline\":\"Blog app with Nextjs (app router), React, MUI framework\",\"description\":\"Here’s a basic structure for your blog app using Next.js (App Router), React, Material-UI (MUI), and Firebase Firestore\",\"author\":{\"@type\":\"Person\",\"name\":\"Huy Lê\"},\"datePublished\":\"2024-07-19T06:49:08.424Z\",\"image\":\"/api/og?title=Blog%20app%20with%20Nextjs%20(app%20router)%2C%20React%2C%20MUI%20framework\",\"keywords\":\"next, app router, react, firebase\"}"}],["$","$L14",null,{"disableGutters":true,"children":[["$","$L15",null,{"my":4,"children":["$","$L16",null,{"items":[{"label":"Blog","href":"/blog"},{"label":"Blog app with Nextjs (app router), React, MUI framework"}]}]}],["$","$L17",null,{"container":true,"spacing":3,"children":[["$","$L17",null,{"item":true,"xs":12,"md":9,"children":[["$","$L18",null,{"variant":"h5","gutterBottom":true,"children":"Blog app with Nextjs (app router), React, MUI framework"}],["$","$L18",null,{"variant":"subtitle1","gutterBottom":true,"children":"July 19th 2024"}],["$","$L15",null,{"sx":{"mt":5}}],["$","$L18",null,{"variant":"body1","paragraph":true,"component":"span","children":["$","div",null,{"children":["$","$19",null,{"fallback":["$","p",null,{"children":"Loading..."}],"children":[["$","p","0",{"className":"p1","children":["$","strong",null,{"children":"Setting up Firebase Firestore"}]}],["$","p","1",{"className":"p2","children":" "}],["$","p","2",{"className":"p3","children":"First, ensure you have set up Firebase in your Next.js project. Install the necessary dependencies:"}],["$","p","3",{"className":"p3","children":" "}],["$","$L1a","4",{"language":"typescript","value":"npm install firebase\nnpm install @mui/material @emotion/react @emotion/styled"}],["$","p","5",{"className":"p1","children":["Create a ",["$","span","1",{"className":"s1","children":"firebase.js"}]," file to initialize Firebase:"]}],["$","$L1a","6",{"language":"javascript","value":"// firebase.js\nimport { initializeApp } from \"firebase/app\";\nimport { getFirestore } from \"firebase/firestore\";\n\nconst firebaseConfig = {\n apiKey: \"YOUR_API_KEY\",\n authDomain: \"YOUR_AUTH_DOMAIN\",\n projectId: \"YOUR_PROJECT_ID\",\n storageBucket: \"YOUR_STORAGE_BUCKET\",\n messagingSenderId: \"YOUR_MESSAGING_SENDER_ID\",\n appId: \"YOUR_APP_ID\",\n};\n\nconst app = initializeApp(firebaseConfig);\nconst db = getFirestore(app);\n\nexport { db };"}],["$","p","7",{"className":"p1","children":" "}],["$","p","8",{"className":"p1","children":["$","strong",null,{"children":"Creating the Blog Component"}]}],["$","p","9",{"className":"p2","children":" "}],["$","p","10",{"className":"p3","children":"Create a Blog component to display individual blog posts:"}],["$","$L1a","11",{"language":"javascript","value":"// components/Blog.js\nimport React from \"react\";\nimport { Card, CardContent, Typography, Chip } from \"@mui/material\";\n\nconst Blog = ({ blog }) => {\n return (\n \n \n \n {blog.title}\n \n \n {blog.content}\n \n

\n {blog.tags.map((tag) => (\n \n ))}\n

\n \n \n );\n};\n\nexport default Blog;"}],["$","p","12",{"className":"p1","children":["$","strong",null,{"children":"Fetching Blogs with Pagination and Filtering"}]}],["$","p","13",{"className":"p2","children":" "}],["$","p","14",{"className":"p3","children":"Create a utility function to fetch blogs from Firestore:"}],["$","$L1a","15",{"language":"javascript","value":"// utils/fetchBlogs.js\nimport { collection, query, where, orderBy, limit, startAfter, getDocs } from \"firebase/firestore\";\nimport { db } from \"../firebase\";\n\nexport const fetchBlogs = async (lastVisible = null, tag = null, pageSize = 5) => {\n let q = collection(db, \"blogs\");\n\n if (tag) {\n q = query(q, where(\"tags\", \"array-contains\", tag));\n }\n\n q = query(q, orderBy(\"createdAt\"), limit(pageSize));\n\n if (lastVisible) {\n q = query(q, startAfter(lastVisible));\n }\n\n const snapshot = await getDocs(q);\n const blogs = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));\n const lastVisibleDoc = snapshot.docs[snapshot.docs.length - 1];\n\n return { blogs, lastVisible: lastVisibleDoc };\n};"}],["$","p","16",{"className":"p1","children":["$","strong",null,{"children":"Creating the Main Blog Page"}]}],["$","p","17",{"className":"p3","children":"Create the main blog page to display the list of blogs with pagination and tag filtering:"}],["$","$L1a","18",{"language":"javascript","value":"$1b"}],["$","p","19",{"className":"p1","children":["$","strong",null,{"children":"Adding Firestore Data Security Rules"}]}],["$","p","20",{"className":"p3","children":"Ensure you have appropriate security rules in Firestore to allow read access:"}],["$","$L1a","21",{"language":"javascript","value":"service cloud.firestore {\n match /databases/{database}/documents {\n match /blogs/{blog} {\n allow read: if true;\n }\n }\n}"}],["$","p","22",{"className":"p1","children":["$","strong",null,{"children":"Conclusion"}]}],["$","p","23",{"className":"p3","children":"This code provides a basic implementation of a blog app with Next.js, Firebase Firestore, and Material-UI. The main features include fetching blogs, filtering by tags, and supporting pagination. Make sure to adjust the Firebase configuration and security rules according to your project’s needs."}],["$","p","24",{"children":" "}]]}]}]}]]}],["$","$L17",null,{"item":true,"xs":12,"md":3,"children":[["$","$L1c",null,{"user":{"name":"Huy Le","description":"Full-stack developer passionate about React and react native, firebase","avatarUrl":"/images/avatars/avatar_me.jpeg","githubUrl":"https://github.com/michaelhuy"}}],["$","$L15",null,{"sx":{"position":"sticky","top":"20px"},"children":[["$","$L18",null,{"variant":"h6","gutterBottom":true,"children":"Tags"}],["$","$L1d",null,{"spacing":1,"children":[["$","$L1e","next",{"label":"next"}],["$","$L1e","app router",{"label":"app router"}],["$","$L1e","react",{"label":"react"}],["$","$L1e","firebase",{"label":"firebase"}]]}],["$","$L1f",null,{"url":"https://store.vitinhhoangduc.com/blog-app-with-nextjs-app-router-react-mui-framework","title":"Blog app with Nextjs (app router), React, MUI framework","description":"Here’s a basic structure for your blog app using Next.js (App Router), React, Material-UI (MUI), and Firebase Firestore"}],["$","$19",null,{"fallback":["$","div",null,{"children":"Loading..."}],"children":"$L20"}]]}]]}]]}],["$","$L15",null,{"my":4,"children":["$","$L16",null,{"items":"$21"}]}]]}]]