Skip to main content

How to integrate LikeMinds ReactJS Feed SDK in NextJS?

Next.js is a powerful framework that excels in server-side rendering (SSR) and static site generation (SSG). However, when integrating React-based components that rely on browser-specific features, such as the window object, you might encounter challenges. Since Next.js performs rendering on the server where browser-specific properties are unavailable, you need to ensure that such components are properly handled to avoid errors.

In this guide, we will walk you through the process of integrating LikeMinds ReactJS Feed component into your Next.js application, addressing potential issues related to server-side rendering and providing solutions for seamless functionality.

Steps to integrate the LikeMinds Feed SDK in NextJS​

Step 1 - Installation​

Install the package using this command in the terminal

npm install @likeminds.community/likeminds-feed-reactjs@latest
tip

Should you encounter any version conflicts, consider running npm i @likeminds.community/likeminds-feed-reactjs@latest --legacy-peer-deps to resolve them.

Step 2 - Creating Custom Export Module​

Create a new folder named feed within the app directory, and then add a file called index.ts inside the feed folder.

This file will export all the components provided by the SDK. Since these are supposed to be rendered on client-side, we need to declare "use client" on the top of this file, and export everything from @likeminds.community/likeminfd-feed-reactjs

"use client";
export * from "@likeminds.community/likeminds-feed-reactjs";
info

Currently, we support the App Router provided by NextJS.

Step 3 - Import the SDK Components​

If you already have a components' folder, use it; otherwise, create a new one. Now, add a component named Feed.tsx that will render the Feed. You can refer to the Getting-Started guide for more details.

Copy and paste the following snippet to your Feed.tsx.

"use client";
import {
  initiateFeedClient,
  LMFeedNotificationHeader,
  LMFeed,
  LMFeedCustomEvents,
} from "../lib/index";

export default function Feed() {
  const userDetails = {
    apiKey: "PASTE YOUR API KEY HERE",
    uuid: "PASTE YOUR UUID HERE",
    username: "PASTE YOUR USERNAME HERE",
  };
  const lmFeedClient = initiateFeedClient();
  const customEventClient = new LMFeedCustomEvents();
  return (
    <>
      <LMFeedNotificationHeader customEventClient={customEventClient} />
      <LMFeed
        client={lmFeedClient}
        customEventClient={customEventClient}
        userDetails={userDetails}
      ></LMFeed>
    </>
  );
}

Step 4 - Render the Feed-Component​

You would need to define a route to render this component. For the scope of this guide, let's render the Feed on /feed.

Create a new folder feed in the app folder, and initiate a new file page.tsx inside it.

Inside page.tsx, copy and paste the code from below snippet.

import dynamic from "next/dynamic";

const DynamicFeedComponent = dynamic(() => import("../components/feed"), {
  ssr: false,
});
export default function FeedPage() {
  return (
    <>
      <DynamicFeedComponent />
    </>
  );
}
info

We are disabling Server-side rendering by setting ssr: false. This would render LikeMinds feed in your NextJS application.

Step 5 - Run your NextJS App​

To run your NextJS app, run the command npm run dev in your terminal. By default your NextJS app should start on the port 3000. Navigate to http://localhost:3000/feed on your browser to see the NextJS feed live.