Next.js가 SWC를 사용하는 이유

카테고리

웹 개발

서브카테고리

개발 툴

대상자

Next.js 프로젝트에서 빌드 속도와 메모리 최적화를 목표로 하는 프론트엔드 개발자

• *난이도**: 중간 (Babel과 SWC의 차이점 이해 필요)

핵심 요약

• Next.js v12 이후 SWC가 기본 컴파일러로 사용 (Babel 대체, 성능 향상 ~17x)
• babel.config.js 존재 시 Babel로 자동 전환
• SWC의 한계: Babel 플러그인 생태계 불완전 (예: styled-components, @babel/plugin-proposal-decorators)

섹션별 세부 요약

1. **Next.js와 SWC의 관계**

• Next.js v12부터 SWC(Rust 기반 컴파일러)가 Babel을 대체
• SWC의 장점:

- 성능: Babel 대비 10–20x 빠름

- 메모리 사용량: Babel 대비 감소

- JSX/TS 지원: Babel과 동일

• Babel 사용 조건: babel.config.js 생성 시 자동 전환

2. **Babel 사용 시점**

• 필수 사용 사례:

- @babel/plugin-proposal-decorators (MobX, class-validator)

- babel-plugin-styled-components (SSR 최적화)

- babel-plugin-import (antd, lodash tree-shaking)

- babel-plugin-react-intl (i18n 추출)

• SWC 대신 Babel 사용 권장:

- 특정 플러그인 필요 시 (예: @babel/plugin-proposal-class-properties)

- legacy 브라우저 지원 (IE11)

3. **SWC의 기능 범위**

• 지원 기능:

- JSX → JS 변환 ✅

- TypeScript → JS 변환 ✅

- Modern JS syntax (ES6+) ✅

- Tree Shaking ✅

• 지원 불가 기능:

- Babel 플러그인 생태계 (예: babel-plugin-macros, babel-plugin-module-resolver)

- 특정 syntax (decorators, pipeline)

4. **SWC vs Babel 비교**

| 항목 | SWC | Babel |

|------|-----|-------|

| 언어 | Rust | JavaScript |

| 성능 | 🔥 빠름 (~20x) | 🔧 느림 |

| 플러그인 지원 | ❌ 제한적 | ✅ 유연 |

| 사용 예시 | Next.js, Vite | CRA, Webpack |

5. **SWC의 제한 사항**

• Babel 플러그인 호환성 부족:

- styled-components SSR 최적화 불가

- @babel/plugin-proposal-decorators 미지원

• Rust 기반 커스텀 플러그인 필요:

- JS 기반 플러그인 작성 불가

• alias 경로 설정:

- tsconfig.json에서 기본 지원 (Babel babel-plugin-module-resolver 대체 불가)

결론

• SWC 사용 권장: React + TypeScript 기본 사용, 빌드 속도 최적화 필요 시
• Babel 사용 권장: styled-components, @decorators, 특정 플러그인 필요 시
• alias 설정: tsconfig.json 활용 (Babel babel-plugin-module-resolver 대체 가능)
• SWC의 한계: Babel 생태계와의 호환성 미비, Rust 기반 커스텀 플러그인 필요