Next 13으로 마이그레이션하기

이번에 회사에서 개발 중인 웹 서비스를 Next 13으로 마이그레이션하여 이 경험을 블로그에 공유해보고자 한다.

 

cli를 활용하여 업그레이드하기

먼저 최신 버전을 설치하여 준다.

npm install next@latest react@latest react-dom@latest
npm install -D eslint-config-next@latest

Next 13으로 업그레이드 해주는 명령어와 ESLint 업그레이드 명령어이다.

나는 ESLint도 사용 중에 있기에 같이 업그레이드 해주었다.

 

Codemods 를 이용하여 새로운 버전 적용하기

Image

next 13 으로 넘어오며 기존 next/image가 next/legacy/image로 변경되었고, next/future/image가 next/image로 변경되었다.

 

image 관련 codemod는 두가지가 있다.

• next-image-to-legacy-image codemod

기존 next/image 를 next/legacy/image 로 변경해준다. 경로만 바꿔주기에 기존과 동일한 동작을 유지한다.

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

위 명령어를 실행하여 적용시켜주었다.

• next-image-experimental codemod

인라인 스타일을 추가하고, 사용하지 않는 props를 제거한다. 실행할 경우 선행으로 1번이 실행되어야 한다.

npx @next/codemod@latest next-image-experimental .

위 명령어를 실행하여 적용시켜주었다.

 

세부 변경사항은 다음과 같다.

• layout prop을 제거하고 style을 추가한다.
• objectFit prop을 제거하고 style을 추가한다.
• objectPosition prop을 제거하고 style 을 추가한다.
• lazyBoundary prop을 제거한다.
• lazyRoot prop을 제거한다.

image 정리

next/image -> next/legacy/image
: next-image-to-legacy-image codemod으로 적용

next/future/image -> next/image
: next-image-experimental codemod으로 적용

Iink

더 이상 수동으로 <a> 태그를 자식으로 추가하지 않게끔 변경되었다.

이는 12.2에서 실험적 옵션으로 추가되었던 것이 기본값으로 변경된 것이다.

import Link from 'next/link'
 
// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
  <a>About</a>
</Link>
 
// Next.js 13: `<Link>` always renders `<a>` under the hood
<Link href="/about">
  About
</Link>

new-link codemod 를 사용하여 적용할 수 있다.

npx @next/codemod@latest new-link .

 

위 명령어를 실행하게 되면 기존에 있던 코드가 아래와 같이 변경된다.

<Link href="/about">
  <a>About</a>
</Link>
// transforms into
<Link href="/about">
  About
</Link>
 
<Link href="/about">
  <a onClick={() => console.log('clicked')}>About</a>
</Link>
// transforms into
<Link href="/about" onClick={() => console.log('clicked')}>
  About
</Link>

자동으로 변경될 수 없는 경우 해당 Link의 동작을 보장하기 위해 legacyBehavior prop가 추가된다.

나같은 경우엔, legacyBehavior를 키워드로 검색하여 테스트 후 상황에 맞게 변경하여 제거하였다.

이제 노가다만 남았다...

이제부턴 기존 pages 폴더를 app 폴더로 변경하고,

세부적으로 'use client' 를 기입하며, router를 변경했던 작업에 대한 내용이다.

 

1. app 디렉토리 생성

기존 pages 폴더 외에 app 폴더를 생성한다.

 

이 때, next.config.json을 변경해줘야한다.

const nextConfig = {
    experimental: {
      appDir: true,
  },
}

app 디렉토리를 사용할 것이란 것을 명시해주었다.

 

Folder structor

app 디렉토리 내 폴더 구조 같은 경우, Next 에서 제시한 폴더 구조를 도입하였다.

https://nextjs.org/docs/app/building-your-application/routing/colocation#split-project-files-by-feature-or-route

Folder naming

• private folder
• route groups

을 사용하여 아래 사진과 같이 폴더 구조를 정립하게 되었다.

2. Router 변경

기존 next/router 를 next/navigation 으로 변경하였다.

그러면서 수정이 필요해진 코드들이 있었는데,

• router.query -> useSearchParams
• router.pathname -> usePathname

으로 변경되었다.

 

글을 마치며

이렇게 next 로 마이그레이션 하며 틀을 다시 정립하는 과정을 적어봤다.

이 외에도 api 사용 방식을 재정립하는 시간을 가졌었는데, 이는 추후에 포스팅해보도록 하겠다.

 

오늘도 글을 읽어주셔서 감사합니다

즐거운 코딩 되세요 :)