Build a Notification System in Next.js with Knock

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@ammarhalees6370]

Colby still remains one of the most underrated channels in the dev community.

[@colbyfayock]

thank you 🙏

[@JamesQQuick]

Ah this is exactly what I need for a recent project!

[@colbyfayock]

its so good! would love to hear what you think if you play around with it

[@colbyfayock]

Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

[@okadz7037]

Omg bro u r always saving me, the cloudinary one and now this, keep up ur legendary 👑

[@colbyfayock]

glad i could help! 🙌

[@mileslegend]

well explained...thanks man ..am giving you a like ..and a subscribe ...your amazing

[@colbyfayock]

appreciate the support 🙏

[@cb73]

There’s a SaaS for every thing a web app needs. It’s like cutting cable and replacing it with 20 streaming services and still think you’re winning.

[@colbyfayock]

It's nice to have that flexibility! Especially with something as complex as these workflows can bd

[@dreamsachiever212]

💯

[@NphiniT]

In-app notification not working for me. I am using Auth.js (NextAuth v5) and all users have an ID in the database. But when I set the recipient to the ID it still does not work. On the Workflow runs though, it says it is completed. I've been at it for hours. Any help will be greatly appreciated

[@colbyfayock]

did you happen to check the Logs page inside of Knock? not just the Workflow Runs, it may give a bit more information to see if that was triggered

[@NphiniT]

@@colbyfayock The logs also show 200 OK response. In my implementation, the 'collection' field is required. So I pass the same value as the 'id'. Do you think this is why I'm having issues? If so, how do I set up collections?

[@NphiniT]

@@colbyfayock So I have found the problem. The recipient collection value is prepended to the recipient ID. So when collection is set to 'abc', and the id is 'xyz'. After execution, the id becomes 'abc/xyz'. Then I found that the collection is only required if the email is provided. So I removed the email. This meant that I have to register every user whenever they log in. I think the current version has a few changes that are different from when you made this video.

[@colbyfayock]

@@NphiniT ahhh okay. glad you were able to find and sort it out

[@cardiderek]

why use knock instead of FCM?

[@colbyfayock]

no familiar with FCM!

[@BrianEspinoza]

is anyone else having issues seeing notifications after deploying to Vercel or some hosted environment? this works when I test locally with ngrok but nothing in prod. user is registering fine with Clerk and Knock but no notification ever appears.

[@colbyfayock]

hey did you check the logs inside of Knock to see if the API request is even making it through? Workflows => Choose your Workflow => Logs

[@BrianEspinoza]

@@colbyfayock i did! Workflows showed message was making it through but never read. Did some more digging, found I had a conflicting env variable in production. That resolved the issue

[@rtorcato]

any idea what library they are using for the workflow branching and drag and drop?

[@jeffeverhart]

Hey from Knock, it's a combo of libraries: react-flow, dagre for graph modeling, and dnd-kit

[@rtorcato]

@@jeffeverhart great thanks. Nice app btw

[@abusomwansantos4945]

can i implement knock notification in my pwa?

[@colbyfayock]

hey i dont see why you couldnt implement but Knock needs the networks to receive notifications. if you're referring to browser push notifications, i dont believe they support that

[@kyngcytro]

Ok is it me or does knock seem close to novu?

[@colbyfayock]

havent heard of that one!

[@deanime-k4i]

novu is an opensource alternative to knock, suprsend and engagespot

[@santyas]

Superb

[@colbyfayock]

thank you!!🙌