집 > 기사 > 웹 프론트엔드 > New Relic으로 앱 라우터 Next.js 애플리케이션을 모니터링하는 방법

New Relic으로 앱 라우터 Next.js 애플리케이션을 모니터링하는 방법

WBOY원래의: 2024-07-24 11:18:53759검색

Next.js는 개발과 런타임 모두에 최적화된 속도와 성능을 제공하는 강력한 JavaScript 프레임워크입니다. Next.js 13이 출시되면서 앱 라우터는 Next.js 애플리케이션에서 라우팅을 처리하는 데 권장되는 방법이 되었습니다. 이 새로운 라우터는 서버 구성 요소 및 스트리밍과 같은 React의 최신 기능을 활용하여 웹 애플리케이션 구축에 대한 보다 현대적이고 효율적인 접근 방식을 제공합니다.

이 블로그 게시물에서는 새로운 App Router를 사용하여 서버 측에 대한 애플리케이션 성능 모니터링과 프런트엔드에 대한 브라우저 모니터링을 설정하여 Next.js 애플리케이션에서 전체 스택 관찰 기능을 제공하는 방법을 알아봅니다. 시작하려면 무료로 제공되는 New Relic 계정과 라이센스 키가 필요합니다.

에이전트 및 미들웨어 설치

Next.js 프로젝트에서 다음 명령을 실행하여 New Relic Node.js APM 에이전트와 Next.js용 New Relic 미들웨어를 설치하세요.

npm install newrelic @newrelic/next

명령이 성공적으로 완료되면 package.json 파일에 포함된 종속성을 확인할 수 있습니다.

 "dependencies": {
   "@newrelic/next": "^0.10.0",
   "newrelic": "^11.23.0",
   "next": "14.2.5",
   "react": "^18",
   "react-dom": "^18"
 },

@newrelic/next 패키지는 Next.js 애플리케이션의 New Relic 모니터링을 위한 공식 도구를 제공합니다. 서버측 렌더링, 미들웨어, 페이지 및 서버 요청 모두에 대한 트랜잭션 이름 지정에 중점을 두고 서버측 활동을 포괄적으로 관찰할 수 있도록 보장합니다.

이 패키지는 별도로 설치되지만 New Relic Node.js 에이전트와 원활하게 통합되어 Next.js 애플리케이션에서 향상된 성능 모니터링 및 오류 추적을 위한 에이전트의 모든 기능을 제공합니다.

클라이언트 측 작업을 다루지는 않지만 클라이언트 측 원격 분석을 위해 New Relic 브라우저 에이전트를 삽입할 수 있습니다(이 블로그 게시물 뒷부분에서 자세히 설명).

구성

New Relic으로 Next.js 애플리케이션을 효과적으로 계측하려면 next.config.js 파일을 수정해야 합니다. 이 구성은 New Relic에서 지원하는 모듈이 웹팩에 의해 손상되지 않도록 보장하고 해당 모듈을 외부화합니다.

다음 콘텐츠로 프로젝트 루트에 next.config.js 파일을 생성하거나 업데이트하세요.

'use strict'

const nrExternals = require('@newrelic/next/load-externals')

module.exports = {
  experimental: {
    serverComponentsExternalPackages: ['newrelic']
  },
  webpack: (config) => {
    nrExternals(config)
    return config
  }
}

다음으로, package.json 파일의 스크립트 섹션을 수정하여 개발을 수정하고 npm 스크립트를 시작하세요. @newrelic/next 미들웨어를 미리 로드하는 Node의 -r 옵션을 사용하여 애플리케이션을 실행하도록 허용하세요.

"scripts": {
  "dev": "NODE_OPTIONS='-r @newrelic/next' next",
  "build": "next build",
  "start": "NODE_OPTIONS='-r @newrelic/next' next start",
  "lint": "next lint"
}

애플리케이션을 실행하기 전에 newrelic.js AMP 에이전트 구성 파일을 프로젝트의 루트 디렉터리에 추가하세요. 자세한 내용은 Next.js 앱의 구성 파일 예시를 참조하세요.

또한 애플리케이션의 예제 .env 파일에 표시된 대로 .env 파일에서 NEW_RELIC_APP_NAME 및 NEW_RELIC_LICENSE_KEY를 사용하세요.

New Relic에서 성능 데이터 보기

애플리케이션을 실행하고 New Relic의 APM 페이지로 이동하세요. 애플리케이션의 서버 측 데이터가 New Relic으로 유입되는 것을 볼 수 있습니다.

How to Monitor App Router Next.js Applications with New Relic

프런트엔드 관찰 가능성

앱 라우터 사용 시 브라우저 에이전트를 삽입하기 위해 app/layout.js(.ts) 파일을 편집하겠습니다.

import Script from 'next/script'
import Link from 'next/link'
import newrelic from 'newrelic'
import './style.css'

export default async function RootLayout({ children }) {
  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>
    <Script
        id="nr-browser-agent"
        dangerouslySetInnerHTML={{ __html: browserTimingHeader }}
      />
      <body>
        <ul className="navbar">
          <li><a href="/">Home</a></li>
          <li><Link href="/users" key={"users"}>Users</Link></li>
          <li><Link href="/about" key={"about"}>About</Link></li>
        </ul>
        {children}
      </body>
    </html>
  )
}

이 프로세스의 단계는 다음과 같습니다.

아직 npm install newrelic @newrelic/next 명령을 사용하지 않았다면 newrelic npm 패키지를 설치하세요.
newrelic.getBrowserTimingHeader 메소드를 추가하세요.
1. hasToRemoveScriptWrapper: true를 newrelic.getBrowserTimingHeader에 대한 인수로 전달하여 브라우저 스크립트가