라이브러리 선택 기준

Next.js 라이브러리 선택 기준

React 라이브러리라고 모두 Next.js App Router와 잘 맞는 것은 아니다. 서버 컴포넌트, edge/runtime, tree-shaking, 접근성을 함께 확인해야 한다.

01

실행 위치 확인

서버에서 import 가능한지, 브라우저 API에 의존하는지, use client 경계가 필요한지 확인한다.

02

번들 영향 측정

차트, 에디터, 지도처럼 무거운 라이브러리는 동적 import나 route 분리를 검토한다.

03

운영 신호 확인

릴리스 주기, 보안 대응, TypeScript 품질, 접근성 이슈가 장기 비용을 결정한다.

RSC compatible
서버 경계와 충돌 없음 서버 컴포넌트에서 import해도 브라우저 전용 API를 즉시 참조하지 않아야 한다.
문서와 실제 build로 확인한다.
Tree shaking
사용 코드만 포함 ESM 구조와 side effect 설정이 번들 크기에 영향을 준다.
분석 도구로 본다.
A11y
기본 상호작용 품질 modal, menu, combobox는 키보드와 ARIA 구현 품질이 중요하다.
직접 테스트한다.
Maintenance
장기 위험 오래 방치된 패키지는 Next/React 변화에 늦게 대응할 수 있다.
대체 후보를 남긴다.

경계 · 크기 · 접근성 점검

경계 라이브러리가 server component import에서 build 오류를 내지 않는가.
크기 도입 전후 클라이언트 번들 증가량을 확인했는가.
접근성 키보드 조작과 focus trap이 실제로 작동하는가.

선정 기준

// runtime support
// bundle impact
// accessibility
// maintenance signals
// replacement path