NextJS) v12 to v13 버전 업데이트하기

넥스트가 3달전에 새로운 버전을 공개했습니다!

next13에서의 변경점이 여러가지가 있지만 가장 중요한건 Turbopack 이지 않을까 싶습니다.
javascript으로 할 수있는 webpack의 성능의 한계를 느끼고 Rust로 개발한 새로운 제품으로 더욱 빨라졌습니다.
공식블로그에서는 다음과 같이 설명합니다.
1. Webpack보다 700배 빠른 업데이트
2. Vite보다 10배 빠른 업데이트
3. Webpack보다 4배 빠른 콜드 스타트
얼핏보기에도 번들 속도를 엄청 빠르게 만들었다는 것 같습니다.

버전을 업데이트 하면서 React와 Node의 최소 버전이 업데이트 되었습니다.
- React 17.0.2 -> 18.2.0
- Node 12.22.0 -> 14.6.0


우선 가장 최신 버전의 파일들을 받아주겠습니다.

npm i next@latest react@latest react-dom@latest eslint-config-next@latest
# or
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
# or
pnpm up next react react-dom eslint-config-next --latest

후에 우리가 변경할 것은 바뀐 Link 태그와, Image 태그들입니다.

기존의 Link 태그는 안에 <a>태그를 가지고 있었지만, 13버전에서는 필요없게 되었습니다.
Image 태그는 기존보다 클라이언트 쪽 javascript 감소 이미지 확장 및 스타일 지정이 더 쉬운 방법, 더 나은 접근성 및 기본 브라우저 지연 로딩이 포함되어 있다고 합니다.

그럼 이제 변경된점들을 기존 프로젝트에 적용하는 방법을 보겠습니다.
NextJS에서는 codemod를 제공하여 기존 코드들의 수정을 더욱 쉽게 할 수 있도록 도와주고 있습니다.

npx @next/codemod@latest <transform> <path>

transform에는 변경할 사항입니다
1. new-link
2. next-image-to-legacy-image

먼저 경로를 쉽게하기 위해 해당 폴더로 이동을 한뒤
원하는 transform을 선택해 작성하시면 됩니다.

// src 하위 폴더 모든 것에 적용하겠다는 의미

npx @next/codemod@latest new-link ./src

npx @next/codemod@latest new-image-to-legacy-image ./src