Install Atatus RUM Agent in Next.js for Real-Time Monitoring

• Next.js version 13+ (Using App Router)
• Next.js version <13 (Using Page Router)

​

Next.js version 13+ (Using App Router)

1. Paste the snippet into the root layout.tsx file.
   import Script from "next/script";
   
   export default function RootLayout({
    children,
   }: {
    children: React.ReactNode;
   }) {
    return (
      <html lang="en">
         <Script>
           {`
             !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.atatus.setAPIEndpoint('YOUR_ON_PREMISE_URL');
                     }
                 });
   
             }(window, document);
           `}
         </Script>
         <body>{children}</body>
      </html>
    );
   }
   
   Here replace YOUR_API_KEY with your API Key. You will find this key in your browser project settings.
2. Restart your Next.js server.

​

Next.js version <13 (Using Page Router)

1. 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.atatus.setAPIEndpoint('YOUR_ON_PREMISE_URL');
             }
         });
     }(window, document);
   
   Here replace YOUR_API_KEY with your API Key. You will find this key in your browser project settings.
2. 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
   
3. Restart your Next.js server.