Next.js 프로젝트 Migration과 Refactoring 과정을 공유합니다.

문제 상황

• Next.js v9와 지원이 중단된 라이브러리로 구성된 레거시 프로젝트
• 기능 추가는 가능하지만 버전 정체와 deprecated 패키지 누적, 코드 가독성 저하가 함께 존재
• 번들 크기와 빌드 속도 개선 여지가 있는 상태

해결 방법

• Next.js를 v12로 올리고 React를 v17로 조정해 점진적 마이그레이션 진행
• Babel을 제거하고 SWC를 도입해 빌드 및 새로고침 속도 개선
• modularizeImports로 lodash import를 최적화하고, Moment.js를 Day.js로 교체해 번들 크기 절감

주의할 점

• Day.js는 Immutable 특성이라 Moment.js와 동일한 사용 방식에 주의 필요
• React 18보다 17을 선택해 아직 완전 지원되지 않는 라이브러리 가능성 고려
• 테스트 코드가 있는 영역 위주로 리팩터링하면 수정 안정성 확보