Amplitude SDK integration with NextJS Pages Router

[piyushchauhan2011]

Getting error while integration of Next.js pages router and amplitude sdk
Followed the instructions as mentioned in examples: https://github.com/amplitude/Amplitude-TypeScript/blob/main/examples/browser/next-app/pages/_app.tsx#L22

Expected Behavior

No error during build

Current Behavior

Amplitude Logger [Warn]: Event not tracked, no destination plugins on the instance
   Collecting page data  ...ReferenceError: navigator is not defined
at Object.<anonymous> (/app/node_modules/.pnpm/@[email protected]/node_modules/@amplitude/analytics-browser/lib/cjs/plugins/network-connectivity-checker.js:31:31)

Possible Solution

Seems like it doesn't work with server, not sure any possible fix from my side

Steps to Reproduce

1. create blank nextjs app
2. pnpm add @amplitude/analytics-browser
3. add the integration as mentioned: https://github.com/amplitude/Amplitude-TypeScript/blob/main/examples/browser/next-app/pages/_app.tsx#L22
4. Build results in given error

Environment

• JS SDK Version: 2.6.2
• Installation Method: pnpm
• Browser and Version: Chrome 123 latest

[piyushchauhan2011]

For now I used useEffect but I think it calls .init multiple times, which seems incorrect.

[mithRabbit]

same issue happened with me.