Next.js continues to be one of the most widely-used frameworks to build full-stack web applications. In version 13, Next.js introduced the App Router, a new routing paradigm built on top of React Server Components that works alongside the existing Pages Router. These changes offer developers a lot of benefits around data fetching and reduced bundle size, but also present a fundamental change to how you work in Next.js.

In this guide you'll learn how to:

  • create a notification workflow with an in-app feed step in Knock
  • identify users and trigger workflows with the Knock Node.js SDK and Server Actions
  • integrate the KnockFeedProvider with React Server Components
  • secure your application for production

Typically, real-time notification feeds are time-intensive features to create. First, you need to manage the infrastructure for WebSockets and Publish/Subscribe messaging patterns. Second, you need to deal with user preferences, user presence detection, storage and logging. And finally, you need to build out the frontend UI and underlying APIs to display the notifications. Luckily, Knock comes with all of that out of the box.

The in-app feed channel in Knock manages all of the backend infrastructure for you. The @knocklabs/react-notification-feed library is highly customizable, with advanced features like expirimental cross-browser feed synchronization. If you need a higher level of control, the @knocklabs/client library is a low-level JavaScript SDK that you can use to build your own custom client-side experience.

Video walkthrough

Resources

If you want to try out Knock to power your notifications, you can sign up for free here.