Next 12버전과 13버전 다른점 정리

라우팅 방식

12버전

앱 폴더와는 별도로 pages 폴더 안에 페이지들 생성

 

13 버전

app안에 폴더를 만들고 page 파일 생성

page 외에 에러나 레이아웃, 로딩 등을 만들어 해당 경로와 하위 경로에 적용시킬 수 있다.

 

기존의 방식에선 중첩 레이아웃을 구현하는 것에 한계점이 있었으나 경로 별 명시적인 라우팅 방식을 통해 개발자가 원하는 대로 라우팅을 구성해 프로젝트의 복잡성을 낮추고 유지 보수가 용이하도록 바뀌었다.

렌더링 방식

페이지 별로 렌더링 방식을 결정하던 것에서 페이지를 더 작은 구성 요소로 분할해 컴포넌트 별로 결정할 수 있도록 바뀌었다.

또, 13버전은 컴포넌트의 기본값을 서버 컴포넌트로 설정하고 페이지 캐싱 기능을 제공해 SSR의 장점에 +@를 가져가는 한편, '스트리밍'이라는 개념을 통해 TTV와 TTI 간의 간격에 대한 SSR의 단점도 보완했다.

 

※ 스트리밍

레이아웃 별, 컴포넌트 별로 UI를 나누고 점진적으로 준비되는 UI를 즉시 로드함으로써 전체 페이지가 로딩될 때까지 기다리지 않고 사용자가 페이지와 상호작용할 수 있는 기능이다.

링크 태그

이제 Link 태그 안에 a태그를 사용하지 않아도 된다.

미들웨어

헤더 설정

NextRequest 객체의 헤더를 클론하여 새로운 헤더를 설정할 수 있게 되었다.
또한 NextResponse.rewrite 내에서 요청 헤더를 설정할 수도 있데 바뀌었다.
그리고 응답 헤더에도 새로운 헤더를 설정할 수 있다.
미들웨어에서 직접 응답 제공
이전에는 미들웨어에서 리디렉션 또는 리라이트를 수행해야 했지만, 이제는 미들웨어에서 직접 응답을 제공할 수 있게 바뀌었다.
예를 들면, 인증 함수를 호출하여 요청을 검사하고 인증에 실패한 경우 이제 JSON으로 오류 메시지를 응답할 수 있다.

추가된 기능

데이터 패치 요청을 자동으로 중복 제거

그러나 만능은 아니고, 두 가지 조건 하에서만 중복 호출되지 않는다.

 

1. 렌더링 사이클 안에서만 적용
예를 들어 빌드 시 해당 페이지의 여러 컴포넌트들에서 요청이 이루어질 경우 한번만 요청이 된다.
하지만 다른 페이지에서의 요청들은 새로운 렌더링 사이클로 인식해 중복 요청으로 간주하지 않고 재요청이 이루어진다.
2. 동일한 인자에 대해서만
호출할 때 넘겨주는 인자가 같은 경우에만 중복 요청하지 않는다.

터보팩

vercel에서 만든 건데

• Webpack보다 700배 빠른 업데이트
• Vite보다 10배 빠른 업데이트
• Webpack보다 4배 빠른 콜드 스타트

라고 한다.

pakage.json에 있는 스크립트의 dev를 "next dev --turbo"로 수정해 터보팩을 적용하면 프로젝트 규모가 클 수록 더 빠른 업데이트를 체감할 수 있다. (현재 개발 환경에서만 사용 가능)

Image 태그

넥스트에서 제공하는 Image 태그를 사용하면 너비, 높이를 지정해주지 않아도 알아서 스크린에 맞게 사이즈 최적화까지 시켜준다. (외부 url을 사용할 경우에는 너비와 높이를 지정해줘야 함.)

 

style={{ width: '100%', height: 'auto', }}를 사용해 반응형을 쉽게 만드는 등 편의성과 최적화 측면에서 도움되는 기능이다.

폰트

모든 글꼴 파일에 대한 자동 자체 호스팅 내장으로 브라우저에서 Google로 요청을 보내지 않는다.

또, 기본 CSS 속성이 설정되어 있어 로드 시 레이아웃 이동이 일어나지 않는다.

OG 이미지 생성

동적 소셜 카드를 생성하기 위해 Next.js와 원활하게 작동하는 새로운 라이브러리를 만들었다고 한다.

웹사이트의 내용을 기반으로 소셜 미디어 썸네일 이미지를 동적으로 생성하는 라이브러리로, 사용하면 웹사이트 링크를 소셜 미디어에 공유할 때 해당 페이지의 내용을 대표하는 맞춤형 이미지를 표시할 수 있게 된다.