[TIL] Next.js 13 업데이트 사항들을 알아보자 (11/23 수정 됨)

Next.js를 유튜브를 통해 1-2번 정도 강의를 듣고 아주아주 간단한 프로젝트를 했었지만, 제대로 활용하지 못했었다.
(2-3일 만에 해결해야 하는 팀플이었고, 나도 팀원들도 Next.js를 그때 첫 경험 했었기에, Next.js의 장점을 살리지 못한 아쉬웠던 경험이다.)

하지만, 프런트엔드 개발자로 살아가기 위해서는 꼭 배워야 한다고 생각해서 늘 마음속에 해결하지 못한 숙제처럼 남아있는 프레임워크다. 취업하고 나서 내년에 기필코 너를 열심히 터득하겠어!

※ Next.js 13이 정식 출시된게 아니라, 아직 beta버전이기에 나중에 문법이 바뀔 수 있음 ※

---

💥 Next.js 13부터 업데이트된 문법들

이전 Next.js 12의 문법은 아래와 같았지만,

• pages폴더
• getStaticProps
• getServerSideProps

이번 Next.js 13에서는 아예 새롭게 바뀌는 듯하다. (하지만 아직은 예전 문법도 병행해서 사용할 수 있음)

• app 폴더 & 예약 파일들 (layout.js / page.js / loading.js / error.js / template.js)
• use()
• fetch()
• Image 컴포넌트
• font

---

💥 Next.js 13부터 업데이트된 기능들

• Turbopack 출시
  Webpack, Vite보다 훨씬 빠르게 번들링을 해주는 툴이다.
  Webpack은 그렇다 쳐도, 몇 달 전만 해도 개발자 커뮤니티에서 나는 아직 사용해보지 못한 Vite의 번들링 속도가 그렇게 빠르다는 반응들이었는데... 벌써 더 빠른 새로운 게 나왔다고..? 진짜 배움에 끝이 없는 프런트엔드... 대단해야

---

2022.11.23 수정한 내용

vercel이 이번 업데이트때 vite보다 10배 빠른 turbopack을 출시하였다고 하였는데,
Vite의 Creator인 Evan You의 입장에서는 그렇지 않으며, 오히려 turbopack이 vite보다 느린 경우도 많다고 반박하였다.

https://github.com/yyx990803/vite-vs-next-turbo-hmr/discussions/8

Is Turbopack really 10x Faster than Vite? · Discussion #8 · yyx990803/vite-vs-next-turbo-hmr

---

• React Server Components
  • use()
    use()를 사용해서 기존에 사용했던 getServerSideProps를 대신할 수 있다.

Next.12 문법.

Next.13 문법

• <Image/> 개선 & font 최적화.
  • Layout Shift가 개선됨으로써 Image와 font가 최적화된다.
    • Layout Shift란?
      UI/UX 경험을 해치고 이미지 로딩이 느리게 되어 화면 레이아웃이 갑자기 변경(밀리는)되는 현상
• html streaming
• Nested Layout
• OG 자동생성

---

💥 Next.js 13 업데이트에 대한 의견을 알아보자

나는 아직 next.js를 써보지 않았기에 다른 개발자들이 이번 업데이트를 어떻게 생각하고 있는지에 대해 적어볼 예정.

• 예약된 파일들을 사용해야 하는 것에 대해
  
  • 단점 : 예약된 파일들을 사용해야 하기 때문에, 디렉터리 구조가 복잡해질 수 있다.
    • ex) layout.js / page.js / loading.js / error.js / template.js
  • 단점 X : 디렉터리 구조는 개발하면서 항상 변경할 수 있는 부분이고, 따로 공부할 필요 없는 없는 것 같아서 딱히 상관없다.
• 백엔드 기능에 대해
  • 단점 : html 렌더링은 잘하지만, 완벽한 백엔드 기능을 기대하기엔 아직 불편한 점이 많다.
  • 단점 : 1인이 프로토타입 만들기엔 좋지만, 실서비스를 하게 되어 규모가 커지게 되면 결국은 백엔드를 분리시켜야 한다.
  • 단점 X : static rendering 하고 싶은 페이지들을 위해서 쓸 수 있고, microservices를 쓸 경우 BFF (Backend for Frontend)로 쓸 수 있으니 케바케.
• 단점 : 서버에서 클라이언트로 데이터를 가져오는 것은 쉽지만,
  클라이언트 -> 서버로 데이터를 보내는 것은 아직 불편한 점이 많다.
• 장점 : 속도 향상, SSR 간편화는 정말 좋다.

---

그래도 이전에 Next.js를 살짝 찍먹 정도는 했기에 아예 모르는 내용들이 아니고, 이해할 수 있는 수준이어서
업데이트된 내용을 살펴보고, 의견도 참고하는 시간을 가졌는데, 오랜만에 재미있고 유익했다.
조만간 간단하게라도 Next.js 플젝을 진행하여 주요 기능들을 살펴보고 장, 단점을 파악할 계획이다.

---

출처 : https://www.youtube.com/watch?v=5BRFGMs1v_o