Examples to use on Next.js / SSR

[albseb511]

• some examples on setting up with Next.js will help

• we have set it up anyway by adding it to _document.tsx

  <script
          type="text/javascript"
          async
          src="https://cdn.jsdelivr.net/npm/clevertap-web-sdk/clevertap.min.js"
        />

• since window is not there in ssr side, need a better way to manage types on TS

• its kind of a workaround atm to set the context state with useEffect

[akashvercetti]

Hi @albseb511 , our SDK is a typically a client side only library and does not by its nature support SSR. Regarding Next.js examples, we have added it our to-dos and will be adding an example project in the future.

[albseb511]

Got it. I've it working with next I guess. But typescript causes issues there. I had some issues with TS and react, but I can create my own module there. With next since window object does not exist causes some build issues.

Was looking out for a solution. Any suggestions on how to go about it?

[albseb511]

Kind of managed in this manner

declare global {
    interface Window {
        clevertap: {
           event: any[];
           profile: any[];
           account: any[];
        } 
    }
}

• added a script tag on the _document file, and embedded the final clevertap file onto it.
• added the above declare module
• made a Provider for clevertap for the entire app,
  • on load, set clevertap id and other information to initialise it,
  • send it to the app through context for all children
• we also made a custom hook which is typed, written in the following manner

import { useContext } from "react";
import { ApplicationStatus, DocumentType } from "../API";
import { CleverTapContext } from "./CleverTapProvider";

export enum CleverTapEvents {
  viewed_screen = "viewed_screen",
}

export type CleverTapParameters = {
  screen_name?: ScreenNames;
  field_name?: string;
};

export type CleverTapProfileParams = {
  Name?: string;
  Identity: string | number;
  Email: string;
  Phone?: string;
  Gender?: string;
  DOB?: Date;
  "MSG-email"?: boolean;
  "MSG-push"?: boolean;
  "MSG-sms"?: boolean;
  "MSG-whatsapp"?: boolean;
};

export enum ScreenNames {
  dashboard = "dashboard",
}

const useCleverTap = () => {
  const clevertap = useContext(CleverTapContext)[0];
  const fireEvent = (event: CleverTapEvents, params: CleverTapParameters) => {
    clevertap.event.push(event, params);
  };

  const profilePush = (params: CleverTapProfileParams) => {
    clevertap.profile.push({
      Site: params,
    });
  };
  const onUserLogin = (params: CleverTapProfileParams) => {
    clevertap.onUserLogin.push({
      Site: params,
    });
  };

  return [
    {
      fireEvent,
      profilePush,
      onUserLogin,
    },
  ];
};

export default useCleverTap;

[KambleSonam]

@albseb511 Kindly go through the sample Nextjs web app , using clevertap-web-sdk https://clevertap-next-demo.vercel.app/ Repo Link - https://github.com/KambleSonam/clevertap-next-demo

[ahmadsyed]

Hi @KambleSonam, Thanks for the example repo , It looks like based on page router , Is there any example of app router too? Also what about server components in next13, An example like page viewed from server component would be great.