1. Home
  2. Language Guides
  3. JavaScript
  4. Real User Monitoring
  5. Next.js

Next.js

Real User Monitoring for Next.js applications with Raygun is available using the Raygun4JS provider.

Raygun4JS is a library you can easily add to your website and web applications which allows you to then monitor frontend performance issues affecting your users.

Next.js has transitioned from Page Routing to App Routing since version 13. Page Routing is still supported alongside App Routing for legacy applications, but it is recommended that new applications use App Routing.

  • If your application uses Page Routing, we'll need to use the Custom Document system from Next.js.
  • If your application uses App Routing, we'll need to modify the Root Layout.
  • If your application is currently migrating from Page Routing to App Routing, you will require Raygun in two locations. See Next's App Router Incremental Adoption Guide for details. In this case, please follow Step 2a and Step 2b for both routing types.

Step 1a: Applications with Page Routing

If you do not already have a custom document located at pages/_document.js / .ts, save the following as pages/_document.js / .ts:

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <script
          type="text/javascript"
          dangerouslySetInnerHTML={{
            __html: `
              !function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
              (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
              f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
              h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
              e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
              
              rg4js('apiKey', 'paste_your_api_key_here');
              `
          }}
        />
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

If you do already have a custom document located at pages/_document.js / .ts, add the above Raygun <script /> immediately below the opening <Html> tag in the same manner.

Insert the following into your root layout located at app/layout.tsx immediately below the opening <html> tag:

 <html>
<head>
  <script
    type="text/javascript"
    dangerouslySetInnerHTML={{
      __html: `
            !function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
            (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
            f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
            h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
            e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
            
            rg4js('apiKey', 'paste_your_api_key_here');
           `
    }}
  />
  //...
</head>
//...

note: It's necessary to use dangerouslySetInnerHTML to create a <script> tag with Next.js. The primary risk from dangerouslySetInnerHTML occurs when including untrusted data in HTML. All of the provided examples are either static strings, or interpolate data directly from the process's environment variables. As such, there is no risk of these issues when using the examples as provided.

Add the following underneath the rg4js('apiKey', ...); line:

rg4js('enableRealUserMonitoring', true);

The provider is open source and available at the Raygun4JS repository.

On this page: