번들러 & NextJS turbopack에서 SVGR 세팅

번들러

여러 개의 파일을 하나의 파일이나 몇 개의 파일로 묶어주는 도구. 이 과정을 번들링이라고 하고 웹 애플리케이션의 성능을 최적화하기 위해 사용합니다. (Webpack, Turbopack, Rollup)

• 파일 결합: 여러 개의 모듈이나 파일을 하나로 결합하여 브라우저가 불러올 파일 수를 줄입니다.
• 의존성 처리: 파일 간의 의존성을 파악하고, 적절한 순서로 번들에 포함합니다.
• 코드 최적화: 코드 압축, 중복 제거, 코드 분할, 트리 쉐이킹 등을 통해 성능을 향상합니다.
• 다양한 파일 형식 처리: CSS, 이미지, 폰트 파일 등 다양한 리소스를 처리한다.
• 개발 편의성: 핫 리로딩, 트랜스파일링(Babel 사용)등을 통해 개발 환경 편의성을 제공합니다.

Webpack loader

Webpack은 기본적으로 js와 json을 처리 할 수 있지만 로더를 사용하면 css, 이미지, ts, scss 등 다른 유형의 파일도 처리할 수 있습니다. 로더는 소스 파일을 변환하여 Webpack이 처리할 수 있는 js 모듈 형태로 만들어 Webpack 번들에 포함 할 수 있게 해줍니다.

동작 순서

1. 파일 확장자 기준으로 로더를 지정
2. 해당 로더가 파일을 변환
3. 변환된 파일을 Webpack이 모듈로 인식

예시) css 파일을 변환하기위해 css-loader와 style-loader를 지정

module.exports = {
  module: {
    rules: [
      {
        test: /\\.css$/, // .css 파일에 적용
        use: ['style-loader', 'css-loader'] // 'css-loader'와 'style-loader' 사용
      }
    ]
  }
};

Turbopack

nextjs에서 Webpack을 대체하기 위해 개발한 차세대 번들러입니다.

Webpack에 비해 빌드 속도가 빠르고 개발 모드에서 매우 빠른 HMR를 지원해 코드 변경 시 거의 즉각적으로 반영됩니다.

turbopack은 Webpack의 로더 시스템을 지원하지만 아직 몇가지 제약 사항이 있습니다.

• JavaScript 코드를 반환하는 로더만 지원됩니다. 스타일시트나 이미지와 같은 파일을 변환하는 로더는 현재 지원되지 않습니다.
• Webpack 로더에 전달되는 옵션은 기본 JavaScript 원시값, 객체, 배열이어야 합니다. 예를 들어, require()된 플러그인 모듈을 옵션 값으로 전달하는 것은 불가능합니다.
• 로더를 구성하려면, 설치한 로더의 이름과 필요한 옵션을 next.config.js 파일에 추가하고, 파일 확장자를 로더 목록에 매핑해야 합니다

https://nextjs.org/docs/pages/api-reference/next-config-js/turbo#webpack-loaders

SVGR 설정 (with turbo)

NextJS 14.2.5 버전

• SVGR 추가
• yarn add --dev @svgr/webpack
• loader 설정
• module.exports = { experimental: { turbo: { rules: { '*.svg': { loaders: ['@svgr/webpack'], as: '*.js', }, }, }, }, }
• 사용하기
• import Star from './star.svg' const Example = () => ( <div> <Star /> </div> )

SVGR Build 설정

위의 설정만 하면 dev 모드에서는 동작하지만 빌드가 실패한다. webpack loader 설정도 함께 해야한다.

https://github.com/vercel/turborepo/issues/4832

https://github.com/vercel/turborepo/issues/4832#issuecomment-1751407444

{
 webpack(config) {
    config.module.rules.push({
      test: /\\.svg$/i,
      use: ['@svgr/webpack'],
    });
    return config;
  },
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      }
    }
  }
}