--- title: Building Real-Time Apps with React, Node, and Next.js description: Learn how to build real-time apps using React, Node, and Next.js. Explore two different approaches: one using WebSockets and another using React Server... canonical: https://daily.dev/posts/building-real-time-apps-with-react-node-and-next-js-kp3r2tofi twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building Real-Time Apps with React, Node, and Next.js | daily.dev og:description: Learn how to build real-time apps using React, Node, and Next.js. Explore two different approaches: one using WebSockets and another using React Server... og:url: https://daily.dev/posts/building-real-time-apps-with-react-node-and-next-js-kp3r2tofi og:image: https://api.daily.dev/og/posts/kP3r2tOfI.png og:image:alt: Building Real-Time Apps with React, Node, and Next.js og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Building Real-Time Apps with React, Node, and Next.js **[Collections](https://daily.dev/sources/collections)** · 2 min read · 11 upvotes · 0 comments ## Summary Learn how to build real-time apps using React, Node, and Next.js. Explore two different approaches: one using WebSockets and another using React Server Components in Next.js. Code examples and guidance provided. ## Content In this article, we will explore how to build real-time applications using React, Node.js, and Next.js. We will cover two different approaches: one using WebSockets with React and Node.js, and another using React Server Components in Next.js. First, let's dive into building a real-time app with React and Node.js. To accomplish this, we will use Fastify, a fast and minimalist web framework for Node.js, along with WebSockets. WebSockets allow for bidirectional communication between the client and server, enabling real-time updates. We will provide easy-to-follow code examples to guide you through the process. Next, we will explore how to build real-time applications using React Server Components in Next.js. Next.js is a popular framework for building server-rendered React applications. With the addition of React Server Components, we can now build real-time applications with ease. We will leverage Pusher, a service for real-time notifications, and Redis, a data storage solution, to create a seamless real-time experience. By the end of this article, you will have a solid understanding of how to build real-time apps using React, Node, and Next.js. Whether you choose to use WebSockets or React Server Components, you will be equipped with the knowledge and code examples to get started. Let's dive in! --- Tags: [#webdev](https://daily.dev/tags/webdev), [#react](https://daily.dev/tags/react), [#nodejs](https://daily.dev/tags/nodejs), [#nextjs](https://daily.dev/tags/nextjs) [View this post on daily.dev](https://daily.dev/posts/building-real-time-apps-with-react-node-and-next-js-kp3r2tofi) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Building Real-Time Apps with React, Node, and Next.js","url":"https://daily.dev/posts/building-real-time-apps-with-react-node-and-next-js-kp3r2tofi","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/building-real-time-apps-with-react-node-and-next-js-kp3r2tofi"},"datePublished":"2024-03-11T19:42:13.673Z","dateModified":"2024-03-11T19:42:12.704Z","description":"Learn how to build real-time apps using React, Node, and Next.js. Explore two different approaches: one using WebSockets and another using React Server...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ba9336ea093c25e087488b08409263ea?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ba9336ea093c25e087488b08409263ea?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"Collections","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Collections","logo":"https://media.daily.dev/image/upload/s--fk_6ycEi--/f_auto,q_auto/v1780996001/logos/collections?_a=BAMAMiWQ0","url":"https://daily.dev/sources/collections"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/building-real-time-apps-with-react-node-and-next-js-kp3r2tofi","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":11},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,react,nodejs,nextjs","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Collections","item":"https://daily.dev/sources/collections"},{"@type":"ListItem","position":3,"name":"Building Real-Time Apps with React, Node, and Next.js"}]} ```