newrelic-node-examples/nextjs/nextjs-app-router/app/layout.js at main · newrelic/newrelic-node-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/*
 * Copyright 2025 New Relic Corporation. All rights reserved.
 * SPDX-License-Identifier: Apache-2.0
 */

// This file defines the overall layout of all pages in the application.
// The default function exported from this module must return a document with
// `html` and `body` tags. A `head` tag will be ignored.

import Script from 'next/script'
import Link from 'next/link'

// Somehow, this ends up including our static stylesheet correctly.
// See https://nextjs.org/docs/app/building-your-application/styling/css-modules#global-styles.
import './style.css'

export default async function RootLayout({ children }) {
  const newrelic = require('newrelic')
  // getBrowserTimingHeader returns an empty string when the agent is not yet
  // connected, so wait for agent to connect
  if (newrelic.agent.collector.isConnected() === false) {
    await new Promise((resolve) => {
      newrelic.agent.on('connected', resolve)
    })
  }

  const browserTimingHeader = newrelic.getBrowserTimingHeader({
      hasToRemoveScriptWrapper: true,
      allowTransactionlessInjection: true,
    })

  return (
    <html>
    <body>
    <ul className='navbar'>
      <li><Link href='/'>Home</Link></li>
      <li><Link href='/users' key='users'>Users</Link></li>
      <li><Link href='/about' key='about'>About</Link></li>
    </ul>
    {children}

    <Script
      // We have to set an id for inline scripts.
      // See https://nextjs.org/docs/app/building-your-application/optimizing/scripts#inline-scripts
      id='nr-browser-agent'
      // By setting the strategy to "beforeInteractive" we guarantee that
      // the script will be added to the document's `head` element.
      strategy='beforeInteractive'
      // The body of the script element comes from the async evaluation
      // of `getInitialProps`. We use the special
      // `dangerouslySetInnerHTML` to provide that element body. Since
      // it requires an object with an `__html` property, we pass in an
      // object literal.
      dangerouslySetInnerHTML={{ __html: browserTimingHeader }}
    />
    </body>
    </html>
  )
}