Build a Notification System in Next.js with Knock

Подписаться 31 тыс.

Просмотров 4,2 тыс.

50% 1

Create a real-time notification system in Next.js with in-app and email notifications using Knock.
Get started with Knock for free at knock.app/?sou...
We'll walk through how to create comprehensive notification workflows using Knock that allows you to granularly set up how and when you want notifications to arrive for users. This includes email notifications using providers like Resend as well as others like SMS, Slack, and more. We'll even see how we can use branching and batching to dynamically send notifications based on contextual and user data.
🧰 Resources
Tutorial: spacejelly.dev...
Starter: github.com/col...
Code: github.com/col...
📺 RU-vid: ru-vid.com...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayoc...
🎥 What I Use: www.colbyfayoc...
#colbyfayock #nextjs #knock #javascript #webdevelopment

Опубликовано:

14 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 33

@colbyfayock 2 месяца назад

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

@ammarhalees6370 4 месяца назад

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

@colbyfayock 4 месяца назад

thank you 🙏

@JamesQQuick 4 месяца назад

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

@colbyfayock 4 месяца назад

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

@okadz7037 3 месяца назад

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

@colbyfayock 3 месяца назад

glad i could help! 🙌

@colbyfayock 4 месяца назад

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

@mileslegend Месяц назад

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

@colbyfayock Месяц назад

appreciate the support 🙏

@cb73 4 месяца назад

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 4 месяца назад

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

@dreamsachiever212 4 месяца назад

💯

@NphiniT 3 месяца назад

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 2 месяца назад

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 2 месяца назад

@@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 2 месяца назад

@@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 2 месяца назад

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

@rtorcato 4 месяца назад

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

@jeffeverhart 4 месяца назад

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

@rtorcato 4 месяца назад

@@jeffeverhart great thanks. Nice app btw

@cardiderek Месяц назад

why use knock instead of FCM?

@colbyfayock Месяц назад

no familiar with FCM!

@abusomwansantos4945 2 месяца назад

can i implement knock notification in my pwa?

@colbyfayock 2 месяца назад

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

@BrianEspinoza 3 месяца назад

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 3 месяца назад

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 3 месяца назад

@@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