Adding real-time toast notifications in Next.js

Опубликовано: 30 Май 2025
на канале: Knock

2,521

For most developers toasts aren’t a new concept, but Knock’s real-time feed API allows you to bind toast notifications in your frontend application to events that are happening outside a user’s session: maybe a user posts a comment, or some other scheduled event happens.

In this video, we’ll look at how we can implement real-time toasts using Next.js, shadcn/ui, and Knock. This video builds on a previous tutorial on creating a Notion-style feed, so be sure to check that video out: • Building a Notion-style activity feed with...

Resources:

https://knock.app/channels/in-app-not...
https://docs.knock.app/in-app-ui/reac...

Chapters:
0:00 - Intro
0:38 - Install shadcn/ui toast
2:29 - Handle real-time feed events
4:09 - Testing the toast
4:23 - Examining FeedItem data
6:13 - Customize toast title and description
8:16 - Conditionally display toasts
10:28 - Advanced uses of data properties
10:47 - Outro