2023년 7월 1일
Next.js에서 Webpack을 어떻게 써야 할까?
nextjswebpackturbopackbundle-analyzerfrontend-build
최근 Next.js는 Turbopack과 Webpack을 함께 지원합니다. 이 글은 요즘 Next.js에서 Webpack이 어떤 역할을 하고, next.config.js의 webpack() 훅으로 무엇을 설정할 수 있는지, 그리고 언제 굳이 Webpack을 건드리지 않는 게 좋은지 정리합니다.
1최근 Next.js에서 Turbopack과 Webpack이 어떤 식으로 함께 사용되는지 설명한다.
2next.config.js의 webpack() 함수를 통해 Webpack 설정을 수정하는 방법을 보여준다.
3alias, SVG 로더, 환경별 플러그인처럼 자주 쓰이는 커스터마이징 패턴을 정리한다.
4@next/bundle-analyzer와 next build --webpack을 사용해 번들을 분석하는 방법을 다룬다.
5언제 Webpack 커스터마이징을 피하고 Next.js 기본 기능으로 해결하는 게 좋은지 가이드를 제공한다.