공부공부/Next.js 공식문서

[next.js 공식문서] 24. Instrumentation

고생쨩 2024. 3. 5. 08:59
728x90

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의

Instrumentation

검색해서 나온 내용

  • 로그, 사용데이터 수집분석, 성능 모니터링, 오류추적 등을 함
  • Sentry, Google Analytics등을 많이 사용함.

문서 설명

  • 실험적 기능
    /instrumentation.ts 파일에서 register라는 이름의 함수를 내보내면 새 Next.js 서버 인스턴스가 부트스트랩될 때마다 해당 함수가 호출됩니다. register 함수가 배포되면 각 콜드 부팅 시 호출됩니다(단, 각 환경에서 정확히 한 번만).

때로는 부작용이 발생할 수 있으므로 코드에서 파일을 임포트하는 것이 유용할 수 있습니다. 예를 들어 전역 변수 집합을 정의하는 파일을 가져오되 코드에서 가져온 파일을 명시적으로 사용하지 않을 수 있습니다. 패키지가 선언한 전역 변수에 계속 액세스할 수 있습니다.

다음 예시에서와 같이 등록 함수에서 사용할 수 있는 부작용이 있는 파일을 instrumentation.ts에서 가져올 수 있습니다

import { init } from 'package-init';
 
export function register() {
  init();
}

그러나 부작용이 있는 파일은 등록 함수 내에서 가져오기를 사용하여 가져오는 것이 좋습니다. 다음 예는 등록 함수에서 가져오기의 기본 사용법을 보여줍니다:

export async function register() {
  await import('package-with-side-effect');
}

이렇게 하면 모든 부작용을 코드의 한 곳에 모아두어 파일 가져오기로 인한 의도치 않은 결과를 방지할 수 있습니다.

모든 환경에서 등록을 호출하므로 엣지와 nodejs를 모두 지원하지 않는 코드는 조건부로 임포트해야 합니다. 환경 변수 NEXT_RUNTIME을 사용하여 현재 환경을 가져올 수 있습니다. 환경별 코드 임포트는 다음과 같습니다:

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    await import('./instrumentation-node');
  }
 
  if (process.env.NEXT_RUNTIME === 'edge') {
    await import('./instrumentation-edge');
  }
}

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.