Fetch Data from Firebase Realtime Database with React and Next.js | Step-by-Step Tutorial

Welcome back, everyone! In this comprehensive tutorial, I'm Rohit, your host, and I'll guide you through the process of fetching data from Firebase's Realtime Database using React and Next.js. If you encounter any issues or have questions, feel free to reach out in the comments or via my social media handles (linked below). Let's dive right in!
𝐁𝐨𝐨𝐤 ( 𝐅𝐫𝐨𝐦 𝐂𝐨𝐝𝐞 𝐓𝐨 𝐂𝐨𝐧𝐧𝐞𝐜𝐭𝐢𝐨𝐧𝐬: 𝐀 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫’𝐬 𝐠𝐮𝐢𝐝𝐞 𝐭𝐨 𝐛𝐮𝐢𝐥𝐝𝐢𝐧𝐠 𝐚 𝐬𝐨𝐜𝐢𝐚𝐥 𝐜𝐚𝐫𝐞𝐞𝐫 ) (I'm the Author)
Amazon India: amzn.eu/d/axYh0B4
Amazon Worldwide: a.co/d/acqJOYR
Gumroad (pdf): ninza7.gumroad.com/l/codetoco...
Join this channel to get access to perks and code :
/ @bugninza
Support My work
/ _ninza7
Connect with me:
Twitter or X Community: / 1712837723860725988
Instagram: / _ninza7
Discord: / discord
Twitter or X Profile: / _ninza7
Video edited by: / kaushal_2319
Music Source: KZbin Music Library
Thanks for watching, and I'll see you in the next Next.js video!
Tags:
Next.js tutorial, Firebase Realtime database tutorial, firebase, Tailwind CSS, Web development tutorial, React JavaScript, Full-stack development,
#reactnative #javascript #webdevelopment #reactjs #nextjstutorial #nextjs #code #coding #guide #firebase

[@SananKhan-br1pn]

sir i have one question you are trying to get all data from firestore database but i want current user data which one is currently logged in

[@developerpaul46]

Thanks

[@BugNinza]

Welcome 🤗

[@saarza9991]

Thanks a lot sir. If you are free, can you show how to make admin panel in Nextjs with firebase auth that display data from firebase ?

[@BugNinza]

sure! stay tuned

[@aceon2ndserve]

What is the difference of real time db and firestore cloud db ?

[@BugNinza]

Real time db: JSON tree, simple lookups, low-latency sync, presence support. Firestore: document collection, complex queries, scalability, offline support for web.

[@shenizelspear2278]

not working for me but great content.... also you should add the code in your videos, anyways i typed it so you[reader] dont have to...peace;) "use client" import {get , ref } from 'firebase/database'; import {useEffect, useState} from "react"; import {database} from '../firebaseConfig'; export default function Home() { const [location, setlocation]= useState([]); useEffect(() => { const locationRef=ref(database, 'location'); get(locationRef).then((snapshot)=>{ if (snapshot.exists()){ const LocationArray= object.entries(snapshot.val()).map(([id,data])=>({ id, ...data, })); setlocation(LocationArray) }else{ console.log('no data available'); } }).catch((error)=>{ console.error(error); }) },[]) return( Fire Alert {location.map((location)=>( {location.title} {location.subtitle} ))} ) } i had a location node on firebase instead of users(shown in video), so its edited.

[@LearnCodeInHindi]

Hi @Rohit, I need your help. I have created a next project using typescript. I am able to fetch data from firebase , its getting printed on console but its taking too much time to render on ui. Sometimes it takes 5 mins , sometimes 20 mins and sometimes it never renders. I really need your help. Unable to find solution anywhere. Please reply.

[@PratiyushGupta-vu6tu]

I am also having same problem