📝 Add nextJS app example

[maurusrv]

This project illustrates how to import the clevertap-web-sdk on a nextJS app.

Since the module is designed for client-side only, for nextJS apps, one can't straightforwardly import the sdk like:

import clevertap from 'clevertap-web-sdk'

due to the library expecting for window object to be defined. See #52

Aside from a workaround, one can asyncly import it when the component mounts or just before an event push:

async function initializeClevertap(): Promise<CleverTap> {
  const clevertap = await import('clevertap-web-sdk')

  // clevertap.default.init(ACCOUNT_ID, TARGET_DOMAIN)
  // clevertap.privacy.push({ optOut: false })
  // clevertap.privacy.push({ useIP: false })
  clevertap.default.setLogLevel(3)

  return clevertap.default
}

This example app does not include the use of react context for simpler implemention or different state / context management.

[Deveshb15]

Did this work for anyone?

[narender2031]

yes

[Deveshb15]

yes

Did you call the function inside a useEffect?

useEffect(() => { initializeClevertap() }, [])

[KambleSonam]

@maurusrv Kindly go through the sample Nextjs web app. Let us know if you are facing any issues here. https://clevertap-next-demo.vercel.app/ Repo Link - https://github.com/KambleSonam/clevertap-next-demo

[maurusrv]

@maurusrv Kindly go through the sample Nextjs web app. Let us know if you are facing any issues here. https://clevertap-next-demo.vercel.app/ Repo Link - https://github.com/KambleSonam/clevertap-next-demo

@KambleSonam any differences that i miss between the demo repo and this PR? if none, it should be good as i also see the dev logs too on the demo site.

1. it has been a year or so since i created this PR. i am still new in contributing to open source so i don't know, should i close this now? I realize maintaining setups in this repo might become a hassle and does not really make sense since frameworks like next will always update. And the info in the description above is already good for others to stumble upon.

2. also, for the same reason that it has been a year, note that the sample is not using the latest next setup. but the clevertap integration still is relevant as this is still how our setup is right now when using the sdk on our nextjs clients. one can also consider just using the clevertap api using fetch instead if they are using custom events and not the system events.

thanks!

[KambleSonam]

Yes @maurusrv , you can close the PR. Do let us know if you face any issues with clevertap-web-sdk