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

Free GitHub Source Code: 👉 www.papareact.com/fcm-code
🚨 Join the world’s BEST developer course & community “Zero to Full Stack Hero” NOW: www.papareact.com/course
🔴 LOOKING FOR THE CODE FROM MY OTHER BUILDS? 🛠️
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 👉 links.papareact.com/newsletter
👇🏻FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPAFAM Merch: 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

[@SonnySangha]

❗Join *Zero to Full Stack Hero* for *50% off* ( _48 HOUR INDEPENDANCE DAY SALE_ ) 👉www.papareact.com/course

[@agadaFrancisLouis]

Not all heroes wear capes. Sonny you’re a saviour. Thank you🙏🏾❤️❤️❤️👏🏾👏🏾👏🏾

[@SonnySangha]

Appreciate you!

[@proflead]

That's a really long and excellent tutorial! :) Agree?

[@DigitalAlchemyst]

Aww i missed this so much so that youtube showed it still live on the home page. This is good info I know it cant wait to watch

Great guide, thanks for putting this together! Notifications are sent twice though (13:05 in the video shows this). One of the notifs is rendered automatically by the browser. The other one is the service worker. Can the default browser notification be disabled?

[@JanMager]

+1

[@SomtochiMkparu-i7o]

Thanks a lot for the tutorial, I needed something like this for a side project.

[@BrutalInsights]

Regular ❤‍🔥 tutorial Next.js app builds has been amazing! University of Code locked in and taking over keep it coming fam!

[@SonnySangha]

You know it!!! The PAPAFAM is in full power!

[@eliuddyn]

This is Amazing 🔥🔥

[@MrJeRimes]

Thank you so much, i've been searching for a full tutorial for web push notification with fcm

[@SonnySangha]

You’re welcome!!

[@developmentwithtariq]

Thank you for your great contribution in my life as a developer

[@manmittiwade]

I'm thinking about web notification and see you are live with this ..love you brother ..❤❤❤❤

[@mileslegend]

you always amaze me..i have been thinking about this and boom you demystifyied it .....big up bro

[@SonnySangha]

Appreciate you brother!!!

[@augustineudeh1584]

Thank you Sonny , God bless you ❤

[@SonnySangha]

Thank you for supporting!!!

[@usmanmarkaz]

Sonny sir me awaiting for React Native full stack projects plz plz make a project playlist just like Next js

[@Deus-lo-Vuilt]

wow , nice !!

[@Soap_js]

Sonny is BACK!!

[@SonnySangha]

Yessssir!!!

[@PHCreatives-ge9hb]

Love it when you're doing it live😅

[@SonnySangha]

A mix of both is perfect for all!

[@wafiqhosain5713]

Sonny Max, Sonny Live, love ur content, bruh...

[@CYCLONE_2XL]

Best ❤

[@SonnySangha]

Thanks for the support!

[@ninoaarondacua5975]

is this working in vercel?

[@johnedet4551]

Also can you build an app, where an admin can send push notification to all his subscriber, whose tokens have been saved to the db. This would be a nice feature in an app.

[@TheMrmancave]

Hi Sonny, are you able to send these push notifications to iPhones and Android devices with a Next.js app?

[@dariod7322]

Can I do this using plain react and js? I don't know typescript and nextJs yet.

[@SonnySangha]

Ofcourse you can!

[@user-su7ew8id4e]

Hey , thanks for this wonderful video , does it work with PWA ?

[@JanMager]

of course, yes

[@user-su7ew8id4e]

@@JanMager thanks for the answer

[@talhaboyraz]

not working on ios. is there any way to chrome push notification on ios.

[@juanpablocs21]

great job. one question, this fcm is working in ios chrome?

[@SonnySangha]

Yessir!

[@anshsingh03]

Amazing video...... I need your help regarding notification in Safari......

[@SonnySangha]

Ask away, ideally in www.universityofcode.com

[@anshsingh03]

​@@SonnySangha thanks

[@johnedet4551]

This doesn't work on safari.. You have any reason why?

[@salyiohh]

we need this for react native expo project

[@SonnySangha]

I hear you!

[@suchitraswain1525]

it's not working on the hosted URL, is there anything we need to config?

[@SonnySangha]

I can’t help with this much information… it does work!

[@user-sz9rf8hz5e]

@@SonnySangha I hosted in firebase hosting using functions it's showing 500 error

[@bernardyamoah1284]

💯💯😊

[@SonnySangha]

Appreciate you!

[@kwamenadadson]

please can i get the source code

[@SonnySangha]

First link in description!

[@kwamenadadson]

@@SonnySangha Thanks but now only the foreground works without the background

[@SonnySangha]

Need to run in HTTPS to register the service worker, check your package JSON and enable experimental-https flag

[@adloukondo2148]

Salut, ttu peux nouus aider avec un tutoriel OTP. avec firebase +nextjs

[@SonnySangha]

Salut, Ofcourse I’m on it!

[@adloukondo2148]

@@SonnySangha Merci beaucoup papa react 💖💖

[@HKML629]

Hello my Boss

[@SonnySangha]

Yo!!!! Enjoy the vid bro!

[@HKML629]

@@SonnySangha Sure Brother

[@HKML629]

@@SonnySangha I really learn alot from you i wants to show to you a project i've made to hear your insights

[@SonnySangha]

Join the university of code Skool community and share inside! Www.universityofcode.com

[@HKML629]

@@SonnySangha I do join now

[@aakash8010]

😘😘🤩😍🥰😇

[@flutter-fm1kl]

No one use RN😂