App Router

Next.js에서 제공하는 Learn Next.js App Router 튜토리얼을 부연 설명과 함께 한국어로 정리해 봤다. 공식 가이드는 총 16개 챕터로 구성되어 있지만, 이번 포스팅에선 프로젝트 세팅을 다루는 챕터 1과 CSS 스타일링 방법을 설명하는 챕터 2는 생략했다.  Optimizing Fonts and ImagesCumulative Layout Shift(CLS, 누적 레이아웃 이동)는 구글이 웹사이트의 성능과 사용자 경험을 평가하는 데 사용하는 지표로, 페이지 로드 중 레이아웃 이동으로 인해 발생하는 사용자 경험의 불편함을 측정한다. 예를 들어, 브라우저가 폴백(fallback) 폰트나 시스템 폰트로 텍스트를 먼저 렌더링 한 뒤 사용자 지정 폰트로 교체할 때 텍스트 크기, 간격 또는 레이아..

App Router vs Page Router기능앱 라우터페이지 라우터라우팅 타입서버 중심클라이언트 사이드서버 컴포넌트 지원OX복잡도더 복잡함더 간단함성능더 좋음더 나쁨유연성더 유연함덜 유연함파일 기반 라우팅중첩 폴더를 사용해 라우트 정의파일이 직접 라우트를 나타냄컴포넌트 기본적으로 서버 컴포넌트기본적으로 클라이언트 컴포넌트데이터 페칭fetch 함수 사용getServerSideProps, getStaticProps, getInitialProps 사용레이아웃레이아웃 중첩 / 동적 레이아웃정적 레이아웃동적 라우트지원하지만 문법 다름Link 컴포넌트로 지원우선순위페이지 라우터보다 우선앱 라우트가 없을 경우 대체 서버 컴포넌트Next.js 버전 13~부터 제공하는 App Router를 사용하면 서버 컴포넌트가 ..