RIP CRA - Now what?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 및 Create React App(CRA) 사용자, Next.js로 이전을 고려하는 프론트엔드 개발자

핵심 요약

• Next.js는 CRA의 대체 옵션으로, 서버 렌더링(SSR), 이미지 최적화, 레이아웃 지원 등 추가 기능을 제공
• CRA의 주요 기능 대응: npx create-next-app, TypeScript 지원, next/head로 react-helmet 대체
• 이전 전략: pages/ 디렉토리에서 시작, 서버 컴포넌트와 API 라우트 활용
• Next.js의 주요 이점: 성능 향상(예: 코드 스플리팅, Edge 지원), 개발자 경험(DX) 개선(예: 파일 기반 라우팅)

섹션별 세부 요약

1. CRA의 종료와 Next.js 이전

• CRA 사용자가 Next.js로 이전해야 하는 주요 이유: 보안 취약점, 라이브러리 업데이트 제한(예: TypeScript 4 고정)
• Next.js는 CRA와 유사한 npx create-next-app 명령어를 제공하며, TypeScript 지원을 자동으로 구성
• CRA의 Webpack 기반 개발 서버와 비교해 Turbopack을 포함하여 성능 향상

2. CRA vs Next.js 기능 비교

• 클라이언트/서버 기능 대응: react-router 대신 pages/ 기반 라우팅, useSWR 또는 fetch()로 데이터 가져오기
• 환경 변수 관리: NEXT_PUBLIC_ 접두사를 통해 브라우저에 전달, 런타임 환경 변수는 Docker 이미지로 관리
• 테스트: CRA는 Jest 사용, Next.js는 사용자 선택 가능(예: Vitest)

3. 이전 전략 및 예시

• SPA 기반 이전: pages/index.tsx로 CRA의 src/App.tsx 대체, pages/api/ 디렉토리에 API 엔드포인트 생성
• 서버 측 이전: app/page.tsx에서 cookies() 사용, 인증 상태 서버에서 처리, app/api/login/route.ts에 서버 측 로그인 처리 구현
• 성능 향상: 서버 컴포넌트 사용으로 클라이언트 JavaScript 번들 크기 감소, SEO 최적화

4. Next.js의 주요 기능

• SSR 및 RSC(React Server Components): 클라이언트와 서버 간 렌더링 분리, 보안 강화
• Partial Prerendering(PPR): React Suspense를 활용해 동적/정적 콘텐츠 분리, 실시간 데이터와 정적 콘텐츠의 혜택 동시에 활용
• 확장성: Edge 및 서버리스 함수 지원, 빠른 초기 로드 시간

결론

• Next.js로의 이전은 보안, 성능, 확장성 개선을 위한 필수 단계이며, CRA의 제한된 기능과 취약점으로 인해 필수적
• 이전 예시와 가이드를 참고해 서버 컴포넌트, API 라우트, PPR 등 Next.js의 고급 기능을 활용
• CRA 기반 프로젝트는 다음 링크의 이전 가이드와 커밋 예시를 참고하여 단계적으로 이전