[Next.js] Next 13

기존 Next.js 12 버전에서 최신버전으로 업데이트 하는 방법

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

 

 

Next.js 공식문서에서 설명하고 있는 변화에 대해서 적으며, 다음과 같이

1. app/Direact - Easier, faster, less, less client JS - 쉽고, 빠르고, 적은 클라이언트 JS
   1. layout
   2. React Server Components (리액트 서버 컴포넌트)
   3. Streaming
2. Turbopack - Up to 700x faster Rust-based webpack replacement. - 700배 빠른 Rust 기반의 웹팩 대체품
3. New next/image - 더 빨라진 레이지 로딩
4. New @next/font - 구글 폰트 내장

1. improved next/link 자식 요소로 <a> 태기 불필요

app/Directory

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

현재는 pages 디렉토리와 app 디렉토리가 공존할 수 있는 베타 버전으로 제공이 되고 있다.

 

레이아웃

app/ 디렉토리는 레이아웃 기능을 제공하는 데, 여러 페이지 간에 네비게이션 바와 같은 공통적인 UI를 공유하여 불필요한 리렌더링을 방지하고, 컴포넌트간의 상호 작용을 구현할 수 있다.

Routing은 app 디렉토리 안에서 진행되는 데, 이때 page.js 라는 단일 파일을 생성해야만 사용할 수 있다.

page.js 파일만 생성하고 터미널을 실행시키면, Next.js에서 layout.js 파일을 자동으로 생성해 준다. 이파일이 바로 레이아웃을 적용할 수 있는 파일이다.

 

리액트 서버 컴포넌트

Next.js의 app 디렉토리에서 리액트 서버 컴포넌트를 사용하여 서버에서만 컴포넌트를 렌더링하고

클라이언트에 전송되는 자바스크립트의 양을 줄여 초기 페이지 로딩을 더 빠르게 수행할 수 있다.

 

스트리밍

스트리밍은 app 디렉토리에서 loading.js라는 예약 파일을 생성하여 사용자가 렌더링이 되기 이전에 로딩중인 화면을 표시할 수 있는 기능이다. 스피너와 같은 로딩 화면들을 구현해 놓으면 아주 간편할 것 같다.

Data Fetching

next.js에서는 데이터를 fetching 해 올 때, getServerSideProps나 getStaticProps를 통해 데이터를 가져왔지만, Next.js13 부터는 이 문법들을 사용하지 않는다.

getData 와 같은 use() 안에 넣어주기만 하면 된다. 추가적으로 fetch 구문의 URL 뒤에 {cache: ‘’} 를 넣어줄 수 있는데, 안에 무엇이 들어가냐에 따라 기존의 getServerSideProps나 getStaticProps와 유사한 기능을 할 수 있다.

Turbopack

터보팩은 웹 개발을 하려면 Rust 기반의 JS 번들링 툴이 필요한데, 기존의 웹팩보다 빠르게 Javascript를 필요한 파일로 컴파일해주는 번들링 툴이다.

next/Image

image 컴포넌트를 통해서 이미지 파일을 넣을 수 있는데, 이를 통해 사용하면 이미지가 자동으로 최적화가 된다. 이미지 로드가 늘리 경우에 기존의 레이아웃이 밀려나는 현상 Layout Shift가 발생하는데, 이를 방지하기 위해 이미지의 width와 height를 설정해야만 한다. Next.js 버전에서는 이를 자동으로 처리해주기 때문에, 최적화에 유용하다.

alt 속성을 필요로 하기 때문에 웹 접근성 향상이 되었다.

next/font

front 역시 자동으로 Layout Shift가 방지되고, 무엇보다 가장 중요한 핵심적인 기능으로 구글 폰트가 내장되어 브라우저에서 구글 폰트 요청을 별도로 하지 않아도 사용할 수 있다.

next/link

<link> 태그를 사용하려면 <a>태그를 필요로 했던 이전 버전과는 달리, Next.js 13부터는 <a> 태그를 더 이상 자식 요소로 필요하지 않는다.

OG Image

카카오톡이나 다른 곳에 링크를 첨부하면 링크와 연관된 이미지가 같이 뜨는 것을 확인할 수 있는데 이를 OG image라고 한다.

이는 콘텐츠 클릭의 참여를 높여주지만, 시간이 오래 걸리고 오류가 발생하기 쉽고 유지하기가 어려웠기 때문에 건너뛰는 경우가 많았다. 하지만 이번 Next.js 13에서 이러한 문제를 개선하기 위해 동적 소셜카드를 새로 생성하는 라이브러리인 @vercel/og 를 도입하였다.

이 접근 방식은 기존의 솔루션보다 무려 5배나 빠르다고 한다.

미들웨어 API 수정

기존의 도입된 미들웨어를 몇 가지 수정하였다고 한다. 우선 request에 대한 header를 더 쉽게 설정할 수 있고,

rewrite나 redirect를 사용할 필요 없이 직접 미들웨어에서 response를 제공할 수도 있게 되었다.

현재 미들웨어에서 response를 제공하려면, next.config.js에 다음과 같은 코드를 추가해주어야만 한다.

 

 

Next.js 공식문서

Next.js 13