Next.js App Router가 출시되면서 많은 개발자들이 기존 프로젝트를 마이그레이션하고 싶어합니다. 이 게시물에서는 주요 과제, 변경 사항 및 프로세스를 보다 원활하게 만드는 방법을 포함하여 프로젝트를 Next.js App Router로 마이그레이션한 경험을 공유하겠습니다.

점증적인 접근 방식이므로 페이지 라우터와 앱 라우터를 동시에 사용할 수 있습니다.

Next.js 앱 라우터로 마이그레이션하는 이유는 무엇입니까?

앱 라우터에는 다음과 같은 몇 가지 장점이 있습니다.

• 향상된 라우팅: 더욱 깔끔한 파일 시스템 기반 라우팅.
• 서버 측 렌더링(SSR) 개선: ​​서버 측 데이터를 보다 효율적으로 처리합니다.
• 메타 처리: 단순화된 SEO 관리.
• 향상된 성능: 다양한 구성 요소에 대한 최적화 기능이 내장되어 있습니다.

마이그레이션을 통해 최신 Next.js 기능을 활용하여 애플리케이션을 미래에도 사용할 수 있습니다.

앱 라우터로 마이그레이션하는 단계

• 종속성 업데이트

첫 번째 단계는 Next.js 및 관련 종속성을 최신 상태로 유지하는 것입니다. 다음 명령을 실행하여 최신 버전의 Next.js 및 React를 설치하세요.

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

• 앱 폴더 구조화

앱 라우터는 경로, 메타데이터 및 레이아웃을 관리하기 위해 새로운 앱 디렉터리를 사용합니다. 구성하는 방법은 다음과 같습니다.

앱 폴더: 페이지를 앱 폴더로 이동합니다. 이제 각 경로에는 page.tsx 파일이 포함된 전용 폴더가 있습니다.

레이아웃: 앱의 특정 섹션에 대한 레이아웃을 정의하려면layout.tsx 파일을 추가하세요. 이는 탐색 모음이나 바닥글과 같은 공유 구성 요소를 처리하는 데 특히 유용합니다.

• 라우터 변경

가장 중요한 변경 사항 중 하나는 라우팅 및 탐색 기능에 대해 next/router를 next/navigation으로 대체한 것입니다.

모든 다음/라우터 가져오기를 다음/탐색으로 교체합니다.
적절한 경우 useRouter와 같은 함수를 usePathname, useSearchParams 및 useRouter()와 같은 새로운 기능으로 업데이트합니다.

• 서버 측 코드 리팩터링

getServerSideProps 및 getStaticProps는 앱 라우터에서 더 이상 사용되지 않습니다.
서버 측 페이지에서 데이터를 가져오려면 비동기 서버 구성 요소 또는 서버 작업을 사용하세요.

export async function getData() {
  const res = await fetch('https://getData.com/data');
  return res.json();
}

• 클라이언트 측 구성요소 처리

클라이언트 구성 요소:
React 후크, 브라우저 API 또는 사용자 상호 작용을 사용하는 모든 구성 요소는 '클라이언트 사용'으로 표시되어야 합니다. 이는 Next.js가 클라이언트 측에서 렌더링하도록 지시합니다.

서버 구성 요소:
브라우저와의 상호 작용이 필요하지 않은 모든 구성 요소는 서버 구성 요소로 남을 수 있습니다. 불필요한 JavaScript를 클라이언트에 전달하는 것을 방지하므로 더 효율적입니다.

• 외부 라이브러리 처리

React Query, AntDesign 또는 프레이머 등과 같은 외부 라이브러리를 사용하는 경우 필요에 따라 업데이트하고 변경해야 합니다. 이 블로그의 모든 변경 사항을 포함할 수는 없습니다. 문서에 변경 사항이 언급되어 있지만.

마이그레이션 중 일반적인 문제

• 라우터 이벤트 처리:

다음/라우터에서 다음/탐색으로 변경되면 라우터 이벤트를 처리하는 데 다른 접근 방식이 필요할 수 있습니다.
이에 따라 라우터 이벤트 리스너나 후크를 업데이트했는지 확인하세요.

• 레이아웃 전환 문제:

복잡한 레이아웃이 있는 페이지(특히 애니메이션이 있는 페이지)를 마이그레이션할 때 레이아웃 변경이 나타날 수 있습니다. 레이아웃 변경을 방지하려면 자리 표시자를 추가하거나 서버측 자체에서 적절한 정렬을 유지하세요.

• 이미지 및 링크 구성요소 업데이트:

앱 라우터에는 이미지 및 링크 구성요소가 변경되었습니다.
codemods를 사용하여 구성요소를 자동으로 업데이트하세요.
이미지 구성요소의 경우 반응형과 같이 더 이상 사용되지 않는 속성을 제거하세요.

• 애니메이션

프레이머, 스위퍼, 루티 파일과 같은 애니메이션 관련 구성 요소는 클라이언트 측에 보관되어야 합니다.

결론

Next.js App Router로 마이그레이션하는 데는 어려움이 따르지만 성능, 확장성 및 유연성이 크게 향상됩니다. 마이그레이션을 관리 가능한 섹션(앱 수준, 페이지 수준, 기능 업데이트)으로 세분화하여 각 변경 사항을 체계적으로 처리할 수 있었습니다.

마이그레이션과 관련하여 질문이나 팁이 있으면 알려주세요!