2022.10.26(수)에 진행 된 Next Conf에서 Next.js 신버전인 Next.js 13버전이 출시되었습니다.
아직 알파, 베타기능들이 더 많지만 서버사이드 기능 강화로 Next.js의 역할이 더욱 강해지지 않을까 생각됩니다.
추가로, 기존에 쓰던 사용법이 많이 변경되었기에 앞으로를 위해 미리미리 13버전을 학습해봐야 할 듯 합니다.
업데이트 요약
1. app/디렉토리(베타)
1. 기존의 pages 폴더와 비슷한 파일 시스템 라우터 (page.{js,jsx,ts,tsx...} 파일이 있어야 기존의 라우팅기능 사용 가능)
- pages폴더 라우팅 : page 폴더 > post.tsx (or) post폴더 > index.tsx
https://localhost:3000/post- app폴더 라우팅 : app 폴더 > post 폴더 > page.tsx 파일 (page 파일 필수)
https://localhost:3000/post
app 폴더에 예약된 파일 : page.js / layout.js / loading.js / error.js / template.js
2. 'use client' 문구로 서버/클라이언트 렌더링 구분 (client js가 적어짐)
// page.js (CSR)
// 파일 상단에 'use client' 사용 시, 클라이언트 사이드 렌더링
'use client';
export default function Page() {
return <div>클라이언트 사이드 렌더링</div>;
}// page.js (SSR)
// 'use client' 미사용 시, 서버 사이드 렌더링
export default function Page() {
return <div>서버 사이드 렌더링</div>;
}3. 공통 레이아웃 구성 가능
// app/blog/layout.js (공통으로 사용 가능한 파일)
export default function BlogLayout({ children }) {
return <section>{children}</section>;
}4. 스트리밍 기능 추가 : 중첩된 레이아웃 혹은 데이터가 필요하지 않은 페이지 부분은 미리 렌더링하고, 데이터 패칭에 의해 느리게 보여지는 부분은 로드상태 표시 후 보여지도록 기능 추가
Turbopack(알파)
Turbopack 은 JavaScript 및 TypeScript에 최적화된 증분 번들러로 Rust로 작성되고 Next.js 13에 내장되어 있습니다.
13버전부터 출시된 터보팩은 vite보다 10배, webpack보다 700배 빠르게 업데이트 되기에 안정화 되었을 때, 안정화되었을 때 기대가 되는 기능 중 하나입니다.
또한, Rust 기반의 SWC Minifier 역시 13버전부터 기본 활성화 되었기에 더욱 빠른 개발, 배포환경이 기대됩니다.
터보팩 테스트 해보기
npx create-next-app --example with-turbopack또는
yarn create next-app --example with-turbopacknext dev --turbo로 터보팩 실행
next/image 기능 안정화
기본 브라우저의 지연로딩 (lazy loading)으로 더욱 빨라졌으며, layout shift현상(이미지가 늦게 로딩되면서 레이아웃이 밀리는 현상)이 해결 할 수 있는 문법을 제공함
next/font
사용자 글꼴을 최적화 할 수 있는 문법 추가
next/link 기능 업그레이드
<Link>태그 아래 <a>를 감쌀 필요가 없어졌습니다.
import Link from 'next/link'
// Next.js 12: <a>를 감싸줘야함
<Link href="/about">
<a>About</a>
</Link>
// Next.js 13: <Link>가 항상 <a>로 렌더 됨
<Link href="/about">
About
</Link>현재 <Link>태그 안에 <a>태그로 감싸진 형태를 가지고있는 프로젝트를 13버전으로 올리게 된다면
바로 에러가 나기 때문에 Next.js에서 자동으로 업데이트가 가능한 codemod를 제공합니다.
npx @next/codemod new-link ./pages./pages 부분은 루트디렉토리에서부터 업데이트를 하고 싶은 폴더로 접근하여 업데이트 시킬 수 있습니다.
그외 OG이미지 생성, 미들웨어 API 업데이트등 많은 기능이 메이저 업데이트 되었으며,
최소 React 버전이 17.0.2에서 18.2.0으로 업데이트되었으며,
Node.js 버전이 12.x가 단종( PR ) 에 도달했기 때문에 최소버전이 12.22.0 -> 14.6.0으로 상향되었습니다.
기존 프로젝트에 적용 할 때 참고하여 적용이 필요 할 듯 하며, Next.js 13버전 만큼 그동안 미뤄왔던 리액트 18버전의 학습을 해야 할 듯 합니다...
Next.js 13업데이트 블로그 글과 vercel에서 제공하는 13버전 app-playground 레포지토리를 참고하여 해당 글을 작성하였으며, 잘못된 부분은 댓글에 남겨주시면 겸허히 받아들여 수정하도록 하겠습니다.
위의 요약을 토대로 더욱 깊은 학습을 해보려합니다.
