Next.js 에서 종속성 패키지에 browserslist 적용하는 방법

프론트 개발을 하다보면 일부 예전 버전의 브라우저들을 지원해야 하는 경우가 있습니다. Next.js 에서도 이와 관련된 기능을 제공하고 있습니다. 

 

package.json 에 browserslist 작성

package.json 에 아래와 같이 browserslist 를 작성합니다. 

{  
  ...
  "browserslist": [
    "chrome 64"
  ]
  ...
}

chrome 64 는 예시이며 지원하고 싶은 브라우저 범위에 맞게 수정하시면 됩니다. browserslist 에 대한 자세한 내용은 여기를 참고해주세요. 

 

위와 같이 작성하면 Next.js 에서는 빌드 시 해당 브라우저 버전의 범위에 맞춰 코드를 트랜스파일링 합니다. 하지만 여기까지만 작성하면 next.js 자체는 package.json 의 browserslist 에 기재된 브라우저 범위에 맞춰 트랜스파일링 되지만 하위 종속성 패키지들에 대해서는 트랜스파일링이 적용되지 않는 현상이 발견되었습니다.

 

next.config.js 에 transpilePackages 작성

next.js 뿐만 아니라 하위 종속성 패키지에도 browserslist 가 반영되어야 한다면 next.config.js 파일에 transpilePackages 를 작성해주어야 합니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['luxon']
}

module.exports = nextConfig

위는 예시이며, transpilePackages 에는 browserslist 가 반영되길 원하는 패키지들을 명시해주면 됩니다.