Next.js 16 HUGE UPDATE - I Can't Believe They Changed This
- Next.js 16은 Next.js 및 React 수준에서 주요 업데이트를 제공하여 전반적인 개선을 이뤘습니다. ✨
- 새로운
create-next-app은 권장 기본 설정을 제공하며, src 폴더 없이 app 폴더를 사용해 프로젝트 설정을 간소화합니다. 🚀
- 개발 서버 로깅이 컴파일 및 렌더링 시간을 분리하여 표시하고, 프록시(이전 미들웨어) 실행 시간까지 포함해 성능 병목 현상 파악을 용이하게 합니다. 📊
- TurboPack이 개발 및 프로덕션 빌드의 기본 번들러로 채택되어, Webpack 대비 빌드 시간이 획기적으로 단축됩니다 (일부 경우 50% 이상). ⚡
- 코딩 에이전트(예: GitHub Copilot)와 개발 서버 간의 빌드 충돌을 방지하기 위해 새로운
dev 폴더가 추가되었습니다. 🤖
middleware.ts가 proxy.ts로, 함수는 proxy로 이름이 변경되었으며, 이는 리다이렉트, 리라이트 등 경량 작업에 중점을 둔다는 의미입니다. 🔄
proxy에서의 인증 처리는 일반적으로 권장되지 않습니다. 특히 데이터베이스 호출이 필요한 경우나 matcher 동기화 문제로 인해 보안 취약점이 발생할 수 있기 때문입니다. 🚫
- 인증 및 권한 검사는 데이터 접근 계층(Data Access Layer)에서 데이터 페칭과 결합하여 처리하는 것이 일관된 보안을 위해 더 나은 아키텍처입니다. 🔒
- 예외적으로, 로그인된 사용자 전용 페이지의 정적 렌더링 유지(예: 유료 콘텐츠) 또는 토큰 유무에 따른 즉각적인 리다이렉트를 위해
proxy에서 인증을 사용할 수 있습니다. 💡
- 레이아웃 중복 제거, 점진적 프리페칭, 뷰포트 이탈 시 요청 취소, 호버 시 프리페칭 우선순위 부여 등 프리페칭 기능이 개선되어 전반적인 성능이 향상됩니다. 💨
- 캐싱이 간소화되고, 서버 액션과
revalidatePath를 활용하여 데이터 변경 후 UI를 즉시 업데이트하는 기능이 강화되었습니다. 💾
- 서버 액션은 데이터 제출 후 SEO 최적화, 번역, 스팸 검사, 콘텐츠 검토 등 백그라운드 작업을 트리거하는 데 활용될 수 있습니다. ⚙️