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 미들웨어를 설치하세요.
명령이 성공적으로 완료되면 package.json 파일에 포함된 종속성을 볼 수 있습니다.
@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 파일을 생성하거나 업데이트하세요.
다음으로, package.json 파일의 스크립트 섹션을 수정하여 개발을 수정하고 npm 스크립트를 시작하세요. @newrelic/next 미들웨어를 미리 로드하는 Node의 -r 옵션을 사용하여 애플리케이션을 실행하도록 허용하세요.
애플리케이션을 실행하기 전에 newrelic.js AMP 에이전트 구성 파일을 프로젝트의 루트 디렉터리에 추가하세요. 자세한 내용은 Next.js 앱의 구성 파일 예시를 참조하세요.
또한 애플리케이션의 예제 .env 파일에 표시된 대로 .env 파일에서 NEW_RELIC_APP_NAME 및 NEW_RELIC_LICENSE_KEY를 사용하세요.
애플리케이션을 실행하고 New Relic의 APM 페이지로 이동하세요. 애플리케이션의 서버측 데이터가 New Relic으로 유입되는 것을 볼 수 있습니다.
앱 라우터 사용 시 브라우저 에이전트를 삽입하기 위해 app/layout.js(.ts) 파일을 편집하겠습니다.
이 프로세스의 단계는 다음과 같습니다.
newrelic.getBrowserTimingHeader 메소드를 추가하세요.
