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

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

에이전트 및 미들웨어 설치

Next.js 프로젝트에서 다음 명령을 실행하여 Next.js용 New Relic Node.js APM 에이전트와 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으로 유입되는 것을 볼 수 있습니다.

프런트엔드 관찰 가능성

앱 라우터 사용 시 브라우저 에이전트를 삽입하기 위해 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 (
    
    

• Home
• Users
• About

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

1. 아직 npm install newrelic @newrelic/next 명령을 사용하지 않았다면 newrelic npm 패키지를 설치하세요.

2. newrelic.getBrowserTimingHeader 메소드를 추가합니다.

   1. hasToRemoveScriptWrapper: true를 newrelic.getBrowserTimingHeader에 대한 인수로 전달하여 브라우저 스크립트가
   2. newrelic.GetBrowserTimingHeader에 대한 인수로 AllowTransactionlessInjection: true를 전달하여 트랜잭션 중이 아닐 때 브라우저 에이전트 삽입을 허용합니다.

3. 렌더링 메소드에서는 문서의

   끝에 New Relic Browser 에이전트 스크립트를 삽입합니다.

4. layout.js(.ts) 파일은 프로젝트의 앱 디렉터리 루트에 있어야 합니다.

layout.js(.ts) 파일 예시를 보려면 다음 링크를 방문하세요.

New Relic에서 브라우저 데이터 보기

애플리케이션을 시작한 다음 New Relic의 브라우저 모니터링 페이지로 이동하여 애플리케이션의 클라이언트 측 데이터가 New Relic으로 흐르는 것을 확인하세요.

자세한 오류 정보를 New Relic으로 보내기

Next.js 애플리케이션에서 자세한 오류 정보를 캡처하려면 클라이언트 측 오류와 서버 측 오류를 모두 처리해야 합니다.

클라이언트측 오류

클라이언트 측 오류의 경우 error.ts(.js) 파일을 사용하여 오류 세부 정보를 캡처하고 New Relic으로 보낼 수 있습니다. 다음은 이를 구현하는 방법의 예입니다.

"use client";

import React, { useEffect } from "react";

const Error = ({ error }) => {
  useEffect(() => {
    if (window.newrelic) {
      window.newrelic.noticeError(error);
    }
  }, [error]);

  return 
Something went wrong
;
};

export default Error;

이 예에서는 오류가 발생할 때마다 useEffect 후크를 사용하여 window.newrelic.noticeError를 호출합니다. 그러면 추가 분석을 위해 오류 세부 정보가 New Relic으로 전송됩니다.

error.js(.ts) 파일은 경로 세그먼트에 대한 오류 UI 경계를 정의합니다. 루트 레이아웃의 오류를 처리하려면 global-error.js(.ts)를 사용하여 루트 앱 디렉터리에 배치하세요.

Next.js의 오류 처리에 대한 자세한 내용은 Next.js 설명서를 참조하세요.

서버 측 오류

백엔드에서 발생하는 오류의 경우 @newrelic/next 모듈이 즉시 처리합니다. 서버측 오류 추적을 위해 추가 코드를 추가할 필요가 없습니다. 모듈은 이러한 오류를 자동으로 캡처하여 New Relic에 보고합니다.

이를 통해 클라이언트 측 및 서버 측 오류를 효과적으로 모니터링하고 New Relic에 보고하여 Next.js 애플리케이션에 대한 포괄적인 오류 추적을 제공할 수 있습니다.

다음 단계

newrelic-node-examples GitHub 저장소에서 이 블로그 게시물의 모든 코드 샘플을 찾을 수 있습니다. GitHub 저장소 문제 섹션에서 피드백을 제공할 수 있습니다.
GitHub의 Next.js 통합 페이지를 확인하세요.
무료 New Relic 계정에 가입하세요. 무료 계정에는 월 100GB의 무료 데이터 수집, 무료 전체 액세스 사용자 1명, 무료 기본 사용자 무제한이 포함됩니다.