[Debug] source map(소스맵) 옵션 (feat. Nextjs)

소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요?
정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다. 이러한 편의성을 제공하는 것이 소스 맵입니다.

NextJS App을 개발하고 있다면 next.confing.js 파일에 옵션을 적용해 볼 수 있다.

// next.config.js
module.exports = {
  productionBrowserSourceMaps: true,
}

 

 

출처 소스맵이란? - 웹팩 핸드북

        Source Maps - NextJS Advanced Features