How to use Azure application insights with nextjs app

user_19035702 0
Viewed 944

I want to use Azure app insight with nextjs but unable to do it , can anyoe help me with that?

azure-application-insights next.js azure
2 Answers

You can use azure app insight with nextjs by using the default react plug-in and you have to create your own history object for nextjs , after the page loads you can make that history object = window.history object. after that you can initiate app insight with the help of that history object . This will solve your problem. I wrote an article regarding the same and you can see this link for refernce. https://medium.com/@nirbhayluthra/integrating-azure-application-insights-with-next-js-the-easy-way-afc83596afad

user_116851660

I want to use Azure app insight with nextjs but unable to do it , can anyoe help me with that?

You can use next-applicationinsights (package created by goenning) to automatically track page views, dependency calls, and exceptions on your Next.js applications by using Azure Application Insights, try following installation step and code snippet from next-applicationinsights:

Installation:

npm install next-applicationinsights

Example:

import App, { Container } from 'next/app'
import { withApplicationInsights } from 'next-applicationinsights';
 
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
 
    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    )
  }
}
 
export default withApplicationInsights({ 
  instrumentationKey: 'YOUR_KEY_GOES_HERE',
  isEnabled: true //process.env.NODE_ENV === 'production'
})(MyApp)

You can refer to Application Insights Usage with NextJS , Enabling the Node.js Application Insights SDK in Next.js and How to use the library with Nextjs?

user_93034700
Related