NextJS Integration

Installing Request Metrics into your NextJS web application for real user monitoring and web performance is fast and easy. It only takes a moment to add our script to your layout.

Request Metrics only runs on the client-side, so the agent needs to be loaded with the NextJS Script element. We recommend adding it to the root layout.tsx file.

import Script from "next/script";

export default function RootLayout({ children }: Readonly) {
  return (
    <html>
      <body>
        /** Your Layout Markup **/
        <Script
          src="https://cdn.requestmetrics.com/agent/current/rm.js"
          strategy="afterInteractive"
          data-rm-token="your-token" />
      </body>
    </html>
  );
}

layout.tsx

Note that the <Script> is capitalized and added to the end of the layout markup. There is also a custom attribute data-rm-token that will be used to associate the page to your account.