'How to use Azure application insights with nextjs app

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

azurenext.jsazure-application-insights


Solution 1:[1]

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

Solution 2:[2]

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.

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?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions