Build a Real-Time Social Feed With Next.js

This guide helps you build a Next.js social media app like X. The app allows users to get real-time post and activity updates and share, comment, bookmark, create, and manage posts.

We will use Stream's Activity Feeds API for scalability and ease of use.

Get started! Activate your free Stream account today and start prototyping with Feeds v3.

You’ll also find additional resources to extend the sample demo app for this tutorial.

First, we’ll go through proof of concept using the Feeds SDK and, along the way, show you how to implement a similar app in JavaScript with Next.js or other supported platforms.

Technical Requirements

Creating a production-ready community feed app with Stream's APIs and SDKs requires a few setup and platform-specific configurations.

Your dashboard’s feed app: Create a new feeds app on your Stream dashboard.
Client and server-side technologies: Pick the platform you want to build your app on, and follow its installation guide.
This article requires the installation of the JavaScript/TypeScript package. To install it in other programming languages, visit the link to the docs above.

Overview of the Activity Feed API & SDKs

A feed is usually an in-app social media platform feature that allows users to send posts and watch videos from creators and people they care about. It can consist of posts on a user's timeline, recommendations, and suggestions, known as activities. An activity may take several forms. It can be a post you send to your timeline to display to followers, sharing content, bookmarking, updating your status, or even liking a tweet.

Developers can easily build social media apps with the above features using Stream's Feed API and SDK. With a social feed, users can create content, upload images, create short video clips, and share them with others. The Feeds API has client and server-side technologies and several platforms for creating a community-based app.

With the latest version 3 release, you can build apps with client-side SDKs such as JavaScript, iOS, React, and React Native. Node is also available for the server-side.

The Feeds SDK Version 3 has several key features, including activity selectors for adding For-You, suggested or recommended, and Following-Style feeds to your app.

There are also advanced features like activity expiration, bookmarking, visibility control, and more. Below are the key features highlighted in the demo Next.js app:

Profile and authentication: Create and manage your profile for authorization and authentication.
Create, pin, search, and delete posts: You can add a new post and perform other related activities.
Follow/unfollow: Follow people you care about and unfollow others.
Push notifications: Receive real-time pushes and updates from users you follow.
Reactions: Like and send emojis: Express emotions and opinions with emojis.
Bookmarks: Save the content you care about for later.
Comments and replies: Comment and reply to others' posts and activity updates.
Trending posts: See all posts currently trending in a specific location.

Common Use Cases of the Feed API

The Feeds API can be used to build services in many application areas. In the context of this tutorial, here are some common community and social use cases for group-based platforms.

X and TikTok-style for-you feeds: Build a system to display content to users based on their location, interest, and engagement with content.
Content exploration and recommendation: Use an AI-powered algorithm to suggest content for specific users and demographics.
Reddit-style commenting system: Build a questioning and answering service with built-in comments and their threads.
Shared and starred activities: Track activity history and display it to users as commented, shared, starred activities, and more.
GitHub-like notification system: Integrate an app-wide notification to inform users about timely activity updates happening in an app.
Feed for polls: Create activity feeds to allow users to vote on specific topics.

Test the Sample Next.js Demo App

The demo app for this tutorial is based on the Stream's Feeds v3 API. This app is a proof of concept using Next.js and the Feeds SDK, demonstrating scalable, real-time social interactions with live updates, engagement features, and modular feed architecture.

To run the demo and experience the look and feel of the web app, you should carry out the following steps.

Install Required Dependencies

First, grab a local version of the Next.js feeds app.

Get started! Activate your free Stream account today and start prototyping with feeds.

git clone https://github.com/GetStream/feeds-v3-demo.git.

Then, ensure you have the latest version of the Yarn package manager on your machine and run this command to fetch and install all project dependencies.

yarn install

Set up an Environment Variable

Add a .env.local file in the cloned project's root directory and fill its content with these credentials.

bash

1
2
3
NEXT_PUBLIC_STREAM_API_KEY=your_stream_api_key
NEXT_PUBLIC_FEEDS_BASE_URL=your_feeds_base_url
STREAM_API_SECRET=your_stream_api_secret

Next, create a new app on your Stream dashboard and use its API key and secret to complete the above. At this point, you should set the Feeds Data Storage Location to US Ohio for the current v3 alpha version of the Feeds API. The other feed storage locations in the image below will be available in later API versions.

Create a new feeds app on your Stream dashboard

If you don't have a Stream account, you can create one for free. You should also specify the base URL of your Next.js app.

Run the Dev Server

You can run the app with yarn dev or use the npm command. The app will be available on your local host at port 3000 http://localhost:3000.

You can also test the live Next.js app that has already been deployed on Vercel using this URL: https://feeds-v3-demo.vercel.app/.

In the above demo, you’ll see how to run the Next.js proof of concept app. To build the app from scratch and integrate the feeds functionalities, you should create a new Next.js app using the npx create-next-app@latest command.

Check out the project's repo to implement the various hooks and components of the app.

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
"use client";

import { usePopularActivities } from "../../hooks";
import { useUser } from "../../hooks/useUser";
import { Loading } from "../../components/loading";
import { Error } from "../../components/error";
import Activity from "../../components/activity";

export default function ExplorePage() {
  const {
    error: userError,
    loading: clientLoading,
    retryConnection,
  } = useUser();

  const {
    popularActivities,
    isLoading: popularLoading,
    error: popularError,
  } = usePopularActivities();

  const loading =
    (clientLoading || popularLoading) && !popularActivities.length;
  const error = userError || popularError;

  if (loading) {
    return <Loading message="Loading popular activities..." />;
  }

  if (error) {
    return (
      <Error
        title="Connection Error"
        message={error}
        onRetry={retryConnection}
      />
    );
  }

  return (
    <div>
      {/* Page Header */}
      <div className="sticky top-0 z-10 bg-black/95 backdrop-blur-sm border-b border-gray-800 font-bold px-4 pt-4 mb-5">
        <h1 className="text-xl text-white">Trending</h1>
        <p className="text-gray-400 text-sm font-light mb-4">
          Discover the most popular posts on the platform.
        </p>
      </div>

      {popularActivities.length === 0 ? (
        <div className="text-center py-12">
          <div className="text-gray-400 text-lg mb-2">
            No popular activities found
          </div>
          <p className="text-gray-500 text-sm">
            Check back later for trending posts!
          </p>
        </div>
      ) : (
        <div className="space-y-4">
          {popularActivities.map((activity) => (
            <Activity key={`popular-${activity.id}`} activity={activity} />
          ))}
        </div>
      )}
    </div>
  );
}

You should also refer to the documentation about user management and tokens & authenticating to allow users to create accounts and log in with your app.

Get Started with Stream Feeds v3

At the time of writing, the Feeds SDK supports Swift, JavaScript, React, and React Native. You can install the JavaScript client with any of the following:

bash

1
2
3
4
npm install @stream-io/feeds-client

# or using yarn
yarn add @stream-io/feeds-client

Once you install the JS feeds client, you can import it, instantiate the client, and create a new feed. Next, add a new activity to the feed with this code snippet.

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { FeedsClient } from "@stream-io/feeds-client";

const client = new FeedsClient("<API key>");
await client.connectUser({ id: "john" }, "<user token>");

// Create a feed (or get its data if it exists)
const feed = client.feed("user", "john");
// Subscribe to WebSocket events for state updates
await feed.getOrCreate({ watch: true });

// Add activity
await feed.addActivity({
  text: "Hello, Stream Feeds!",
  type: "post",
});

The above sample code is all it takes to get up and running with the JavaScript Feeds API. The example code below also shows you how to create a basic social media feed. Check out the Feeds Docs for advanced features like creating polls, notification feed, custom activity types, and how to receive real-time updates for your feeds.

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Create a timeline feed
const timeline = client.feed("timeline", "john");
await timeline.getOrCreate();

// Add a reaction to activity
await client.addReaction({
  activity_id: "activity_123",
  type: "like",
});

// Add a comment to activity
await client.addComment({
  object_id: "activity_123",
  object_type: "activity",
  comment: "Great post!",
});

// Add a reaction to comment
await client.addCommentReaction({
  comment_id: "comment_123",
  type: "love",
});

Where To Go From Here

This article showed you how to use Stream's Activity Feed API to build a real-time social feed app in Next.js.

The sample demo is just one example of what you can create with Stream Feeds. From here, you might explore creating an app with notifications and personalized activity feeds using Swift, React, and React Native.

To get started, check out the Feeds v3 documentation and the interactive API demo.

If you want to build a social network platform for Android, iOS, and React Native, Stream also offers Feed UI kits to help you move faster.