[Nextjs] Next.js 13은 뭐가 달라졌을까?

Dongjun Ahn·2023년 9월 25일

Next.js 13

2022년 10월 26일 수요일, Next.js Conf에서 Next.js 13을 발표했다.
아직 Beta지만, 미리 Next.js 공식문서를 보면서 Next.js 13에서 추가된 점을 정리해보았다.
Update 된 Nextjs를 사용하고 싶다면

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

이렇게 설치해주면 된다.

New app Directory (Beta)

기존의 Next.js에서는 Automatic Routing을 사용할 때, pages 디렉토리 안에 파일을 생성하여 별도의 라우터 없이도 애플리케이션 내부에서 즉시 경로를 생성할 수 있었다. 하지만, Next.js 13버전부터는 app/이라는 새로운 디렉토리가 등장하여 라우팅 및 레이아웃 기능을 개선하였다.

Turbopack (Alpha)

Next JS 13 에서는 이를 기본 번들러로 사용할예정

next/image

기존에 지원하던 next/image 강화.

줄어든 client-side JavaScript
스타일링과 설정이 더 편해짐
alt 태그가 필수
네이티브한 lazy 로딩은 hydartion이 필요없기 때문에 더 빠름
CLS(Cumulative Layout Shift) 방지 : 자동으로 width 랑 height 정보를 받아와서, CLS 를 막아준다. 로컬 이미지 파일이 아닌 remote URL 기반이라면, 반드시 width와 height을 명시해주어야 한다.
Priority : LCP(Largest Contentful Paint) 를 줄일 수 있게 도와주는 기능. next js 가 화면을 로딩할 때 해당 이미지 렌더링에 우선순위를 줌.

@next/font

새로운 폰트 시스템을 제공한다.

폰트 자동 최적화
폰트 성능을 위해 불필요한 추가 request를 제거
Built-in automatic self-hosting for any font file
size-adjust 옵션을 이용한 layout shift 제거

@next/font 는 구글 폰트를 기본적으로 지원해서 CSS와 font는 빌드 타임에 정적 자원으로 불러와브라우저에서는 요청을 보내지 않음.
커스텀 폰트도 지원을 하여, 이 또한 캐싱과 preloading을 지원.

next/link

Link 컴퍼넌트를 사용할 때, 드디어 a 태그를 껴넣지 않아도 된다고 함.
오히려, 이제는 더이상 a 태그를 Link 안에 포함시킬 수 없음.

Open Graph Image Generation

OG 태그용 이미지 generation도 공식적으로 지원. vercel에서 만든 @vercel/og 라는 모듈을 사용하면 된다.

위와 같이 og 이미지를 반환하는 용도의 next js api 파일을 @vercel/og 모듈 내부의 ImageResponse를 이용해서 구현할 수 있다.

해당 og 이미지를 적용할 next JS 페이지 컴퍼넌트로 가서 og:image를 갖는 메타 태그를 생성해준다. 그리고, 위에 og image를 반환하는 api path를 content 속성에 넣어주면 끝.

Middleware API

request에 헤더 set

rewrite나 redirect 없이도 바로 특정 status를 response

next.config.js. 안에 experimental.allowMiddlewareResponseBody 옵션을 설정해야 사용가능

Data Fetching

next js 에서 지원하는 SSR data fetching 방식이 바뀐다.
getServersideProps, getStaticProps, getInitialProps 모두 next js 가 SSR 과 CSR 을 자유롭게 넘나드면서 사용할 수 있게 해주는 키 포인트였지만 방식이 바뀜

기존에는 useEffect 에서 data를 fetch해 오고, 그 데이터를 특정 state에 저장하는 방식을 많이 사용했지만 그냥 컴퍼넌트 로직에서 바로 await으로 data 를 가져오고 있고, 화면에 data의 내용을 그리는데 SSR단계에서 fetch가 이루어진다.

{ cache: 'force-cache' } : build시에 가져온 데이터가 사용되고 직접 revalidate하기 전까지는 데이터가 캐싱되는 방식. getStaticProps와 동일. fetch 의 default 옵션.
{ cache: 'no-store' } : 매 요청시마다 새로 fetch. getServerSideProps와 유사.
{ next: { revalidate: 10 } } : next 옵션을 줌으로서, cache 돼고있는 data 들을 revalidate 시킨. 값은 초 단위를 의미하며, 이 예시에서는 10을 줬으니 10초마다 캐시가 지워질 것이고 새롭게 갱신된 데이터로 새로 캐싱.

한줄 정리

app Directory(Beta) : Easier, faster, less client JS
- 레이아웃
- React 서버 컴포넌트
- 스트리밍
Turbopack(alpha) : Up to 700x faster Rust-based Webpack replacement.
next/image : Faster with native browser lazy loading.
@next/font(beta) : Automatic self-hosted fonts with zero layout shift.
next/link(Update) : Simplified API with automatic <a>.
OG Image
Middleware API(Update)
Data Fetching