기초 개발 노트

Next.js 15에서 발생한 Hydration 오류와 해결 과정

Next.js 15로 업데이트한 뒤, 예상치 못한 Hydration 오류가 발생했다. typeof window !== 'undefined' 같은 조건문을 사용하는 코드에서 특히 문제가 심했다. SSR과 CSR에서 HTML이 다르게 렌더링되면서 React가 이를 감지하고 경고를 띄웠다. 해결하기 위해 여러 가지 시도를 해봤지만, 결국 Next.js 14와 React 18.2.0으로 다운그레이드하는 것이 가장 안정적인 방법이었다.Hydration 오류의 주요 원인typeof window !== 'undefined'** 사용**: Next.js 15에서는 SSR과 CSR에서 typeof window 조건문이 불일치를 일으킬 가능성이 높아졌다.스타일 동적 변경: GSAP, Swiper 같은 라이브러리들이 CSR..

Next.js 14: Pages Router에서 App Router로 마이그레이션하기

1. App Router로 변경해야 하는 이유Next.js 14가 나오면서 공식 문서에서도 App Router를 권장했다. 기존 pages/ 폴더 기반의 Pages Router는 점차 유지보수 대상에서 밀려나고 있는 상황이었다.이번 기회에 프로젝트를 App Router로 마이그레이션하면서 변경해야 할 부분을 정리했다.주요 장점은 다음과 같았다.서버 컴포넌트 지원으로 클라이언트에서 불필요한 JS 실행을 줄일 수 있었다.레이아웃을 더 직관적으로 관리할 수 있었다.파일 기반 라우팅이 더욱 강력해졌다.TypeScript 없이도 사용 가능했다.대부분의 자료가 TypeScript 기반이었지만, 자바스크립트만으로도 App Router를 충분히 활용할 수 있었다.이번 마이그레이션 과정도 TS 없이 JavaScript만..