이번에 Next.js 13 신버전 발표회가 열렸다고 합니다.
발표에서의 키워드를 나열해보자면, Turbopack 출시, html streaming, React server components, <Image/> 개선, Nested Layout, OG 자동생성, font 최적화, 컬러 최적화, next/link 개선 등… 이 있습니다!
그리고 충격적인 소식은 문법에도 변화가 있어서 공부양이 늘어났다는 것이네요. 그래도 다행인 것은 12버전의 문법들을 병행해서 사용할 수 있다고 해요!
새롭게 공부하시는 분들은 13버전의 문법을, 이전에 next.js를 사용했던 분들은 천천히 문법에 익숙해져도 될 것 같아요!
Turbo Pack
Turbo Pack은 JS의 번들링툴이라고 합니다. 웹팩보다 700배 빠르다고 발표회에서 소개하셨어요.
app 폴더 및 예약 파일의 등장
Next.js 12버전까지는 pages 하위 디렉터리가 라우터 역할을 하고, src 하위에 소스 파일 디렉터리를 생성하였는데 13버전에선 약간의 변화가 생겼습니다.
app 이라는 디렉터리가 생겼고 하위에서 layout, lading. page 같은 예약 파일을 활용할 수 있다고 합니다.
use(), fetch()
데이터를 서버에서 요청하는 Promise 함수를 use() 에 담아서 사용하면, getServerSideProps 를 대신해 서버 데이터를 가져올 수 있습니다.
Image, font 로딩 개선
이미지 크기가 변경 될 때마다 레이아웃이 밀리거나 흔들리는 Layout Shift 를 방지하기 위해선 이미지 width, height 값을 미리 잡아놓아야 합니다!
이번 업데이트에서 Next.js의 Image 태그를 활용하면 알아서 처리하게끔 업데이트 된다고 합니다.
이미지 뿐만 아니라 폰트에서도 마찬가지라고 합니다!
Link
이전에는 <Link href="/page"><a>Page</a></Link> 형태로 <a> 태그를 작성하였는데,
13 버전부터는 <Link href="/page">Page</Link> 형태로 <a> 태그가 항상 포함된다고 합니다.
느낀점 : 점점 프레임워크의 특징이 강해지는 것 같습니다. 특히 loading, page같은 예약 파일의 증가로 디렉터리 구조가 복잡해지더라도 이 기능들을 꼭 써야하는 상황이 생길 것 같아요. 아직은 베타 버전으로 정식 출시가 안되었다고 하는데 어떤 식으로 발전될지 기대가 됩니다 🫣