Install Atatus agent in Next.js site - Real User Monitoring

Create an atatus.js file inside the public/js folder and paste our Atatus (async CDN) script. Make sure to remove the opening and closing <script> tags.

// atatus.js :

!function(window, document) {
      window._atatusConfig = {
          apikey: 'YOUR_API_KEY',
          // Other options if needed
      };

      // Load AtatusJS asyc
      function _asyncAtatus(t){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://dmc1acwvwny3.cloudfront.net/atatus-spa.js";var n=document.getElementsByTagName("script")[0];e.addEventListener&&e.addEventListener("load",(function(e){t(null,e)}),!1),n.parentNode.insertBefore(e,n)}

      _asyncAtatus(function() {
          // Any atatus related calls.
          if (window.atatus) {
              // window.atatus.setUser('unique_user_id', 'emailaddress@company.com', 'Full Name');
          }
      });
  }(window, document);

Here replace YOUR_API_KEY with your API Key. You will find this key in your browser project settings.

Next, you need to create a file called _document.js inside the pages folder. Add a <script> tag inside the <Head> tag as follows:

// _document.js :

import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
            <script async type="text/javascript" src="/js/atatus.js" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Restart your Next.js server.