Next.js 13.3 마이그레이션을 완료하며

들어가기 전

라이브러리를 선택할 때 중요하게 생각하는 부분

• 문서가 얼마나 잘 되어있는지

• 개발자 경험이 얼마나 편한지

• 많은 사람들이 사용하고 있는지

• 어떤 기능을 핵심적으로 제공하는지

변경점

Next.js page router → app router

• App Directory
• layout, loading, error boundary file
• Server Components
→ 코드가 간결해지고 페이지 구조가 직관적으로 느껴졌습니다.
→ 클라이언트인지 서버인지 구분하며 컴포넌트를 짜니 컴포넌트의 역할이 명확해졌습니다.

• Built-in 최적화 기능들
• Metadata API for SEO
• Image
• Font

• 기대되는 다음 업데이트
• Turbopack: 700배 빠른 러스트 기반 웹팩 (Beta)
• Server Actions: form마저 서버로 가능..?! (Alpha)

Tanstack Query → SWR

1. 먼저 캐시(stale)로부터 데이터를 반환한 후,

2. fetch 요청(revalidate)을 하고,

3. 최종적으로 최신화된 데이터를 가져오는 전략

• Next.js를 만든 vercel이 만든 라이브러리 ✨ → Next.js의 변경사항을 가장 빠르게 반영할 수 있을 것 같다. → Next.js가 추구하는 방향과 동일하게 업데이트 될 것 같다.

• 아주 친절한 문서 - 한국어 지원 - 동적인 데이터를 다루기 때문에 과정이 모호할 수 있는데 이미지 설명이 굉장히 친철해 이해가 편함

• 더 자세한 기능

아쉬운 점

• 많은 것을 배운 시기였습니다. 기록으로 남겼다면 내가 어떤 고민을 하고 어떻게 해결하고 어떻게 해결 방법을 찾았는지 확인할 수 있었을 텐데 남기지 못한 아쉬움이 있고 남기지 않으니 기억이 가물가물합니다..

얻은 것

• appDir이 실험적인 상태였다보니 예시가 많지 않아 구글링을 통해 해결할 수 있는 케이스가 잘 없었습니다. 덕분에(?) 구현하거나 에러핸들링을 할 때 문서를 통해서만 해결하는 방법이 익숙해진게 좋은 경험이었습니다.

• nextjs github 이슈를 보면서 나와 동일한 문제를 겪고 있는 사람이 있는지 확인하면서 자연스럽게 오픈소스를 자주 보게 되었습니다. 변화가 많은 시기에 과정을 지켜본 느낌이 들어서 안정적인 버전이 배포되었을 때 느끼는 기쁨이 더 컸습니다.

• 새로운 기술을 차분히 알아가는 것에 자신감이 생겼습니다.

다음에 할 일

• 많은 문제를 만난 시기일 수록 기록을 남겨 내 문제 해결 과정을 되돌아보고 발전시키자

• 혼자하는 공부에서 멈추지 말고 설명 가능할 정도의 지식을 쌓자