How to add Push Notifications to a Next.js App w/ Firebase Cloud Messaging! (Tutorial for Beginners)

Free GitHub Source Code: 👉 https://www.papareact.com/fcm-code

🚨 Join the world’s BEST developer course & community “Zero to Full Stack Hero” NOW: https://www.papareact.com/course

🔴 LOOKING FOR THE CODE FROM MY OTHER BUILDS? 🛠️
https://links.papareact.com/github

Join me as I show you how to add & test Push notifications on iOS, Android, and Web Browsers such as Google Chrome and Safari using Firebase Cloud Messaging. You'll learn the following in this video:

👉 How to Implement Push Notifications on any Next.js App using Firebase Cloud Messaging (This configuration also lets you send iOS and Android notifications)
👉 What is Firebase Cloud Messaging and its Benefits
👉 Explaining how App States work for Notifications, such as foreground notifications (when the tab is open) and background notifications (when the tab/window is closed or out of focus)
👉 What are Service Workers & How to Implement and Debug them
👉 Explaining Firebase Cloud Messaging Best Practices
👉 How to add a toast Notification with ShadCn to handle foreground notifications

📩 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter

👇🏻FOLLOW ME HERE:
Instagram: https://links.papareact.com/instagram
Facebook: https://links.papareact.com/facebook
LinkedIn: https://links.papareact.com/linkedin
Twitter: https://links.papareact.com/twitter
Discord: https://links.papareact.com/discord

💰 WANT TO SUPPORT THE CHANNEL?
Donate here: https://links.papareact.com/donate
Grab some PAPAFAM Merch: https://links.papareact.com/merch

🕐 TIMESTAMPS:
00:00 Introduction
00:34 Push Notification in Firebase Cloud Messaging
01:16 Why Firebase Cloud Messaging
01:39 Explaining Firebase Cloud Messaging (1/2)
02:38 Firebase Cloud Messaging Message Types
03:20 Explaining Firebase Cloud Messaging (2/2)
03:42 Initialising the Build
04:32 Setting Up the Firebase Project
09:59 Firebase Cloud Messaging Demo
11:04 Setting Up a Messaging Campaign
14:56 Explaining App States for Notifications
16:11 What is a Service Worker?
16:40 How to Inspect & Debug a Service Worker
18:21 Purpose of Service Workers in Web Dev
20:02 Explaining How Background Messages Work
21:44 Explaining How a Service Worker Works
25:42 Implementing a Foreground State Toast Notification
32:17 Explaining the Functionality of the useFcmToken Custom Hook
50:17 Push Notification Demo for Foreground & Background App State
53:08 How & Why Tokens Are Saved to a Database
55:13 Firebase Cloud Messaging Best Practices
56:12 Summary
57:06 Join my course Zero to Full Stack Hero for more
57:55 Outro

Let’s get it PAPAFAM 🔥.

#nextjs #pushnotifications #firebase #ios #android #google #tailwindcss #typescript #testing #reactjs #javascript #nextjs15 #firebasecloudmessaging #fcm