next 13이 업데이트되면서 대규모 업데이트가 되었다
next.js의 13 업데이트 내용이 무엇일까 ?
Next.js 공식문서에 설명하는 변화점들은 다음과 같다.
- app/ Directory (beta)
- Laytous
- React Server Components
- Streaming
- Trubopack (alpha)
- New next/images (stable)
- New @next/font (beta)
- Improved next/link
등이 있다.
이번에는 app 디렉토리에 대해 알아보고자 한다.
app/ Directory
app Directory 는 현재 베타버전으로, 프로덕션 환경에서는 사용을 권하질 않는다고 공식홈페이지에선 말하고 있습니다.
next는 주요 라우팅을 pages 폴더 내에서 하고 있었는데,
app Directory가 생기면서 페이지는 물론이고, 레이아웃, 서버사이드렌더링, 데이터 fetch 등을 지원한다.
앱 디렉토리가 탐색 전체에서 상태를 유지하고 재렌더링을 방지하는 고급 라우팅 패턴을 활성화하는 복잡한 인터페이스를 쉽게 배치할 수 있습니다.
레이아웃을 중첩하고 구성 요소, 테스트 및 스타일과 같은 경로와 함께 애플리케이션 코드를 함께 배치할 수 있으며, 앱 디렉토리 내부에 page.js(ts)파일을 생성해야만 사용할 수 있다.
Server Component
앱 디렉토리는 리액트의 새로운 서버 컴포넌트의 아키텍처에 대해 지원한다고 한다.
// 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>;
}기존에는 useEffect 내부에서 data를 fetch하고, 특정 state에 저장하는 방식을 사용했어야 하는 next에서
컴포넌트 내에서 함수를 이용하여 data를 가지고 오고, 데이터를 바로 그릴 수 있다.
fetch에 3가지 옵션이 도입이 되었다고 한다.
- fetch(URL, {cache : ‘force-cache’ })
- build시에 가져온 데이터 사용, 직접 데이터 fetch하기 전까지 데이터 캐싱
- = getStaticProps
- fetch(URL, {cache: ‘no-store’})
- 매 요청시마다 새로 fetch
- = getServerSideProps
- fetch(URL, {next: {revalidate: 10}});
- next 옵션을 줌으로, cache되고 있는 data들을 fetch시킬 수 있으며, 초를 의미하여 10초 이후에 데이터가 refetch된다.
next/image
Next.js 13은 강력한 새 이미지 구성 요소를 도입하여 레이아웃의 변경 없이 이미지를 쉽게 표시하고 성능 향상을 위해 필요에 따라 파일을 최적화 할 수 있다.
Next.js 커뮤니티 설문 조사에서 응답자의 70%가 프로덕션 환경에서 next.js 이미지 구성 요소를 사용했으며 결과적으로 Core Web Vitals가 개선되었다.
import Image from 'next/image';
import avatar from './lee.png';
export default function Home() {
// "alt" is now required for improved accessibility
// optional: image files can be colocated inside the app/ directory
return <Image alt="leeerob" src={avatar} placeholder="blur" />;
}
@next/font
새로운 글꼴 시스템을 도입한다.
- 사용자 지정 글꼴을 포함하여 글꼴 자동 최적화
- 개인 정보 보호 및 성능 향상을 위해 외부 네트워크 요청 제거
- 모든 글꼴 파일에 대한 자동 자체 호스팅 내장
- CSS를 사용하여 자동으로 제로 레이아웃 이동
next/link
next/link는 <a> 태그를 수동추가할 필요가 없다.
<Link href="/about">
<a>About</a>
</Link>
로 사용했던 방식에서,
<Link href="/about">
About
</Link>
와 같이 사용을 할 수 있다.
og이미지 생성
OG를 원활하게 작동할 수 있도록 @vercel/og 라는 라이브러리 생성
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>
),
);
}
Turbopack
Webpack의 새로운 Rust 기반 후속 제품인 Turbopack이 포함되어있다.
- Webpack보다 700배 빠른 업데이트
- Vite보다 10배 빠른 업데이트
- Webpack보다 4배 빠른 업데이트
[참고자료]