Next.js에서 sourcemap 생성하기

Next.js에서 sourcemap을 생성하는 방법

1. Next 에서 제공하는 소스맵 옵션을 켠다.

• production 빌드에도 소스맵을 추출할 수 있는 옵션이기 때문에, production 배포시에 반드시 sourcemap파일이 배포되지 않도록 처리해주어야한다.
• 참고 : https://nextjs.org/docs/advanced-features/source-maps

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

2. webpack config 수정

• 웹펙 devtool 옵션을 줘야하는 지 모르고 sourceMapFilename옵션만 수정하다가 시간을 많이 보냈다. sourceMapFilename은 따로 수정할 필요가 없다.[file].map[query] 가 기본 설정이다.
• 참고 : https://devlog.juntae.kim/post/blog-development-review-3

const prod = process.env.NODE_ENV === 'production'

module.exports = {
  productionBrowserSourceMaps: true,
  ..
  webpack: config => {
    return {
      ...config,
      devtool: prod ? 'hidden-source-map' : 'inline-source-map',
    }
  },
}