Using the JavaScript Agent in Next.js is a little different than other straight forward JS injections. We will use a functional React component (AdrumConfig.js) to do most of the work and then simply render that component in our layout.js file. We do not need to worry about placing the script in the head of the application as Next.js Script component handles that for us.
We must add a few config items to handle reacts Single Page application (SPA) architecture.
config.spa = {"spa2":true};
config.isZonePromise = true;
AdrumConfig.js
'use client';
import Script from 'next/script';
import { useEffect } from 'react';
const AdrumConfig = () => {
let adrumConfigRef = {};
useEffect(() => {
// window is accessible here.
adrumConfigRef = window['adrum-config'] || (window['adrum-config'] = {});
setAdrumConfig(adrumConfigRef);
}, []);
// Update this config with your apps config.
const setAdrumConfig = (config) => {
config.appKey = '<YOUR APP KEY>';
config.adrumExtUrlHttp = 'http://cdn.appdynamics.com';
config.adrumExtUrlHttps = 'https://cdn.appdynamics.com';
config.beaconUrlHttp = 'http://pdx-col.eum-appdynamics.com';
config.beaconUrlHttps = 'https://pdx-col.eum-appdynamics.com';
config.useHTTPSAlways = true;
config.resTiming = { bufSize: 200, clearResTimingOnBeaconSend: true };
config.spa = {"spa2":true};
config.isZonePromise = true;
config.maxUrlLength = 512;
};
return <Script src='//cdn.appdynamics.com/adrum/adrum-23.3.0.4265.js' />;
};
export default AdrumConfig;
We must place the AdrumConfig.js component somewhere in the application and import it into the layout.js file.
Next, we simply render the AdrumConfig.js component in the layout.js return block like this:
<html lang='en'>
<AdrumConfig />
<body>
.
.
.
// What ever body the application has.
</body>
</html>
