Next.js Conf에서 발표된 Next.js 13버전 정리
1. 새로운 File System Router인 app Directory(beta) 추가
pages 폴더를 이용해 간단하게 router page를 생성할 수 있다는 것은 Next의 가장 큰 킬링 포인트 중 하나였습니다.
이번 13 버전에서는 이런 Next의 장점과 React@18에서 출시한 Server Component를 효과적으로 사용할 수 있게 해 줄 app 폴더가 추가되었으며, beta상태인 지금과 달리 점점 pages 폴더를 대체해 나가거나 app은 server components용, pages는 client components용으로 적용될 것이라고 예상됩니다.
app폴더는 기존 pages폴더에 많은 사람들이 만들었던 components 폴더를 합쳐둔 것 같은 폴더로 공통 layout, head, loading, error, template components들을 경로에 맞게 손쉽게 만들 수 있으며 다른 페이지로 이동되어도 Re-Render가 되지 않고 사용할 수 있도록 제공된다고 합니다.
Re-Render가 되지 않는다는 의미는 변경되는 부분이나 데이터가 Fetching 되는 부분만 업데이트되는 Streaming 처리될 수 있도록 제공되며, app 폴더의 파일들은 모두 기본적으로 Server Component로 구성된다고 합니다.
그리고 Data의 Fetching 역시 기존의 방식에서 아래와 같은 방식으로 간단하게 변경되어 사용된다고 합니다.
// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default and can be omitted.
fetch(URL, { cache: 'force-cache' });
// This request should be refetched on every request.
// Similar to `getServerSideProps`.
fetch(URL, { cache: 'no-store' });
// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
fetch(URL, { next: { revalidate: 10 } });2. Webpack을 대체할 Turbopack(alpha)
Next는 12 버전에서 Babel을 대체하는 SWC를 장착한 것과 같이 이번에는 터보 팩을 추가한다고 합니다.
물론 아직 alpha 단계이기 때문에 바로 사용하기에는 어려움이 있지만 swc 역시 빠른 시간 내에 정식 출시가 됐던 것을 생각하면 웹팩에서 터보 팩으로 변경되기까지는 그리 긴 시간이 걸리지 않을 것 같습니다.
터보포 팩의 성능은 Next에서 발표한 자료만으로도 충분히 기다릴만한 가치가 있는 것 같습니다.
3. next/image
큰 변화는 없는 것 같습니다.
5개의 사항으로 next에서는 발표했지만, 정리하자면 좀 더 사용하기 편리해졌으며, lazy loading이 더욱 빨라졌다 정도로 정리할 수 있을 것 같습니다.
4. @next/font
한국에서 웹 사이트를 제작하는 개발자라면 무척이나 반길만한 컴포넌트인 것 같습니다.
상대적으로 큰 용량을 지닌 한글 폰트인 만큼 성능과 UIUX에 더 큰 만족도를 느낄 수 있을 것 같습니다.
- 커스텀 폰트와 next에서 제공하는 google font 자동 최적화하고 자체 호스팅 합니다.
- google font를 next에서 제공하기 때문에 외부 네트워크 요청하지 않습니다.
- size-adjust를 이용해 Layout Shift를 방지해 줍니다.
// Google Font
import { Inter } from '@next/font/google';
const inter = Inter();
<html className={inter.className}>
// Custom Font
import localFont from '@next/font/local';
const myFont = localFont({ src: './my-font.woff2' });
<html className={myFont.className}>5. next/link
Next@12.2에서 beta로 출시되었던 기능이 드디어 정식으로 변경되었습니다.
Next의 Link태그는 간단하게 Routing처리를 할 수 있다는 점에서 무척 매력적이었지만, 사소하지만 귀찮았던 요소가 바로 내부를 무조건 a태그로 한 번 더 감싸 주어야 됐습니다.
하지만 이제는 정식으로 a태그를 자동으로 render 해 귀찮음이 줄어들었습니다!
import Link from 'next/link'
// Next@13 이전
<Link href="/about">
<a>About</a>
</Link>
// Next@13
<Link href="/about">
About
</Link>6. 그 외
그 이외에도 SEO를 위한 동적인 OG 이미지를 생성해 주는 @vercel/og와 next@12에서 추가된 middleware에서 request에 대한 header 설정을 더 쉽게 할 수고, middleware에서 바로 response(rewrite, redirect) 처리를 할 수 있도록 업데이트되었습니다.