Next.js 13 vs 이전 버전

[guesung]

Next.js 13 vs 이전 버전

[seondal]

Next13 앱라우팅에 대한 이야기
https://velog.io/@brgndy/Next.js-13-App-%ED%8C%8C%EC%9D%BC-%EC%A0%95%EB%A6%AC

[guesung]

App routing

• 공식문서
• 13.4버전(2023.5.4)부터 App Router 기능이 stable되며 해당 기능을 제공

[guesung]

Next.js 13에서 바뀐 점

1. app 디렉토리
   1. 기존 page 디렉토리 라우팅 -> app 디렉토리 라우팅 e.g. app/board/page.tsx
2. layout
   1. 여러 페이지에 적용하고 싶은 레이아웃 컴포넌트를 가장 상위 폴더에 넣어주면 됨 e.g. app/board/layout.tsx
3. 스트리밍 (로딩)
   1. 해당 컴포넌트의 콘텐츠가 로딩되는 동안 loading.tsx컴포넌트를 출력
   2. layout.tsx와 page.tsx아래 하위 항목을 <Suspense>로 감싸주면 적용할 수 있음
4. Data fetching 방법 변경
   1. 기존 getServerSideProps, getStatisProps -> React Server Component에서 fetch 하면됨
   2. 참고
   3. Server Component에서는 cookies(), headers() 등 강력한 서버 함수 제공
5. 새로운 next/image
   1. altr가 필수로 바뀜
   2. 성능 향상
6. 글꼴 시스템 @next/font
   1. 구글 글꼴을 쉽게 가져다 쓸 수 있게 됨 (inter)
7. React 18.2, Node.js 14부터 지원
8. Next/link를 더이상 a태그랑 같이 안써도 됨

이 중에서 1~4번 정도가 app routing을 하게 될 경우 가져가게 될 장점인 거 같아요.

장점만 보면 상당히 app routing이 매력적으로 보입니다.

[guesung]

[guesung]

React 18에서 업데이트 된 React Server Component의 장점을 취하려면 App routing을 채택하는 게 맞다고 생각해요. 앞으로의 Next.js의 업데이트 방향, Performance와 Flexibility 측면에서도요.

[guesung]

Page Routing