[NextJS] NextJS 14의 변경점 및 업데이트 알아보기

2023년 10월 26일 NextJS 14버전이 발표되었습니다.

프론트엔드의 트렌드에 가장 부합하는 프레임 워크인 만큼 관심이 많이 쏠렸습니다.

NextJS 14의 변경점

1. Turbopack: App 및 Pages Router에 대한 5,000개의 테스트가 통과
2. 로컬 서버 시작 시간이 이전보다 53% 빨라짐
3. Fast Refresh를 통한 코드 업데이트 속도가 이전 대비 94% 향상
4. Server Actions (안정 버전): 점진적으로 향상된 뮤테이션 지원
   • 캐싱 및 재검증과 통합
   • 단순한 함수 호출 또는 양식과 자연스럽게 작동
5. Partial Prerendering (미리보기): 빠른 초기 정적 응답 및 동적 콘텐츠 스트리밍
6. Next.js Learn (새로운 기능): App Router, 인증, 데이터베이스 등을 가르치는 무료 강의

이 중에서 중점적으로 볼만한 내용은, App Router를 NextJS 측에서도 집중적으로 밀고있다는 점입니다.

원래 next 13버전에서는 이전의 pages router를 권장 했습니다.

하지만 본격적으로 13.4버전 부터 app router가 기본적으로 적용 되었고

이에 따라 NextJS도 app router를 사용하기를 권장하는 추세입니다.

 

App Router의 변경점 1

기존 Pages Router 에서는 서버 사이드 랜더링 구현을 위해 getServerSideProps 라는 함수를 구현해 사용했습니다.

하지만 App Router 에서는 서버 사이드 구현을 위해 함수를 구현하지 않고,

기존에 데이터 페칭을 위해 사용되는 fetch나 axios 등으로 서버 사이드 랜더링을 구현할 수 있습니다.

App Router의 변경점 2

뷰포트, 색 구성표 및 테마에 대한 중요한 페이지 콘텐츠를 서버에서 스트리밍하기 전에,

먼저 브라우저에 전송해야 하는 메타데이터가 있습니다.

이러한 meta 태그가 초기 페이지 콘텐츠와 함께 전송되도록 하면 원활한 사용자 경험에 도움이 되며,

테마 색상을 변경하거나 뷰포트 변경으로 인해 레이아웃이 이동하여 페이지가 깜박이는 것을 방지할 수 있습니다.

Next.js 14에서는 메타데이터를 분리했습니다.

다음 메타데이터 옵션은 이제 더 이상 사용되지 않으며 향후 주요 버전의 메타데이터에서 제거(deprecated)될 예정입니다:

• viewport: 뷰포트의 초기 확대/축소 및 기타 속성을 설정합니다.
• colorScheme: 뷰포트의 지원 모드(밝음/어두움)를 설정합니다.
• themeColor: 뷰포트 주변의 크롬이 렌더링해야 하는 색상을 설정합니다.

NextJS Learn 추가

기존 사용자 분들에게는 상관없겠지만

처음 접하는 초보자 분들에게 가이드가 제공됩니다.

기존 next 자체적으로 문서정리도 매우 뛰어났기 때문에 러닝커브를 줄일 수 있었지만,

이번 14버전으로 올라오면서 next 측에서도 높아진 러닝커브를 의식 한건지

NextJS Learn 페이지를 추가했습니다 

이 페이지는 단계별로 next를 입문하는 사람들이 빠르게 배울 수 있도록 만든 전자책 느낌이라고 보시면 됩니다.

강의 살 필요없이 이걸로 공부하며 익히면 좋을 것 같습니다.

https://nextjs.org/learn?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=home

Learn Next.js | Next.js by Vercel - The React Framework

위 페이지가 learn 페이지 입니다. 매우 정리가 잘된 유용한 문서이니 참고하면 좋을 것 같습니다.

 

이 외 다른 변경 사항은 공식문서를 참고하면 좋을 것 같습니다.

https://nextjs.org/blog/next-14