Next.JS를 배우기로 하고 보니 13버전이 나왔더라
배우려고 하자마자 보니 최신버전이 나왔고, 추가된 부분 중 중요해보이는 부분들이 많아서 정리를 해보기로 했다. alpha인 부분은 제외하고, beta중인 부분과 업그레이드 된 부분을 정리해보자.
app Directory
Next.js에서 가장 핵심이라고 생각되는 라우팅 기능인 pages 폴더의 기능을 대체하고자 나온 것으로 보인다. pages에서 부족하거나 보완이 필요하다고 생각되는 기능들이 추가되었다.
- 레이아웃 : 라우터들 간에 UI의 공유를 쉽게하여 불필요한 리랜더링을 방지한다.
- 서버 컴포넌트 : 더욱 동적 애플리케이션들이 되도록 서버 우선 설정을 default값으로 설정한다.
- 스트리밍 : 인스턴트의 로딩 상태를 표시하고 랜더링되는 UI 단위로 스트리밍한다.
- Data Fetching을 지원 : async 서버 컴포넌트와 연장된 fetch API를 컴포넌트-레벨에서 fetching이 가능하도록 한다.
레이아웃
탐색 단계 전체에 걸쳐 상태를 유지하는 복잡한 인터페이스의 배치를 쉽게 만들어주고, 불필요한 재렌더링을 방지하며, 고도화된 라우팅 패턴을 가능하도록 한다.
여러 페이지에서 공통적으로 사용하는 NavBar나 Footer같은 UI를 공유하여, 추가적인 UI의 랜더링을 방지한다.
이는 이전에 _app.js 파일과 layout 컴포넌트를 제작하여 사용하던 것을, 기본으로 제공하게 된 것으로 보인다.
서버 컴포넌트
React의 새로운 서버 컴포넌트 아키텍처를 지원한다.
앱 디렉토리의 모든 컴포넌트는 위 아키텍처를 default값으로 하는데, 서버 컴포넌트 아키텍처는 서버에서 컴포넌트를 랜더링하고 클라이언트에 전송되는 JS의 양을 줄여 초기 페이지 렌더링을 더 빠르게 한다는 내용이다.
스트리밍
점진적인 렌더링이 가능하고 UI 단위의 렌더되어 클라이언트에 제공한다. 또한 로딩 인디게이터를 구현하기 위한 loading.js를 디렉토리에 생성하여 사용하도록 한다.
로딩인디게이터를 구현하기 쉽도록 loading.js파일 기능을 제공하고, UI 단위의 랜더링을 점진적으로 클라이언트로 제공하는 기능으로 보인다.
Date Fetching
fetching 관련 method를 개선하였다.
이제 getServerSideProps 와 getStaticProps를 사용하지 않는다.
getData와 use(getData()), fetch(URL, { cache: '옵션명' })을 통하여 구현하도록 변경되었다.
<Next.js 홈페이지 게시글에서 발췌한 원본 예시>
// app/page.js
async function getData() {
const res = await fetch('https://api.example.com/...');
// The return value is *not* serialized
// You can return Date, Map, Set, etc.
return res.json();
}
// This is an async Server Component
export default async function Page() {
const data = await getData();
return <main>{/* ... */}</main>;
}
// 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 } });next/image
img태그를 대신하는 image의 기능이 개선되었고, 이름이 바뀌는 등의 변화가 있다.
- image 기능의 장점
- 각 기기에 맞는 사이즈로 모던 이미지 포맷을 사용할 수 있도록 제공한다.
- CLS를 자동으로 예방해준다.
- LazyLoading을 통해 빠른 페이지 로딩을 돕는다.
- placeholder에 blur 기능을 제공하고, blurDateURL옵션을 통해 동적인 이미지의 blur 처리도 가능하다.
- 외부에 저장된 이미지도 리사이징을 지원한다.
- 기능 개선점
- JS의 client-side 제공을 줄였다.
- style과 설정이 더 쉬워졌다.
- alt 태그를 기본으로 설정하여 이를 통한 접근성을 향상시켰다.
- 웹 플랫폼에 맞게 조정되었다.
- LazyLoading이 hydration을 필요로 하지 않게 되어 더욱 빨라졌다.
- Rename
- next/image => next/legacy/image
- next/future/image => next/image
기존의 이름이 변경 또는 재배치되며 예전에 사용하던 문법대로 사용하면 옵션 문법인 future의 내용이 적용되어 혼선이 올 수 있다.
next/font
- 기능 개선
- 커스텀 폰트를 포함하여 글꼴을 자동으로 최적화한다.
- 개인 정보 보호 및 성능 향상을 위하여 외부 네트워크의 요청을 제거한다.
- 모든 글꼴 파일에 대하여 자체적인 호스팅을 한다.
- css의 size-adjust 프로퍼티를 통하여 Layout shift 요소를 제거한다.
- google font를 기본으로 제공한다.
구글폰트
import { Inter } from '@next/font/google';
const inter = Inter();
<html className={inter.className}>커스텀폰트
커스텀폰트 역시 자동 호스팅, 캐싱 및 글꼴 파일 사전 다운로드를 지원한다.
import localFont from '@next/font/local';
const myFont = localFont({ src: './my-font.woff2' });
<html className={myFont.className}>next/link
<Link> 태그 내부에 <a> 태그를 더 이상 필요로 하지 않는다.
OG Image
다른 소셜의 링크를 첨부하면 연관된 이미지가 같이 뜨는데 이를 OG Image라고 한다.
링크의 심미적 또는 정보적 기능을 높이기도 하지만, 로딩이 느려지거나 오류가 발생할 수 있다.
이런 문제를 개선하기 위한 동적 소셜카드 생성 라이브러리를 도입하였다.
@vercel/og
// pages/api/og.jsx
import { ImageResponse } from '@vercel/og';
export const config = {
runtime: 'experimental-edge',
};
export default function () {
return new ImageResponse(
(
<div
style={{
display: 'flex',
fontSize: 128,
background: 'white',
width: '100%',
height: '100%',
}}
>
Hello, World!
</div>
),
);
}자체적 통계로 기존 대비 5배 가량 빨라졌다고 한다.
