App Router

앱 최적화# 이미지 컴포넌트NextJS는 라는 특정 이미지 컴포넌트를 제공한다. 이미지는 웹 사이트 성능에 꽤 무거운 부분을 차지하기 때문에 이미지에 대한 부분만 최적화를 시켜도 페이지의 성능을 높일 수 있다. 이 컴포넌트의 역할은 로드된 이미지 파일의 사이즈나 포맷 형태를 자동으로 최적화 시켜주어 사이트 성능과 속도 향상에 도움을 준다. width / height 프로퍼티width와 height 속성은 컴포넌트에 반드시 들어가야 할 속성이다. 해당 이미지가 들어갈 적합한 공간을 미리 마련해 레이아웃 이동을 방지해야 하기 때문이다. 만약 로컬 파일에 있는 이미지를 사용한다면 src 속성에 import한 이미지의 .src를 제거하고 사용해야 Next가 logo의 width와 height 속성을 인식할 ..

병렬 라우트 (Parallel Routes)병렬 라우트는 동일한 레이아웃 내에 여러 페이지를 동시에 렌더링할 수 있도록 한다. 예를 들어 대시보드 내에 여러 섹션을 구성하거나 소셜앱의 피드와 같은 곳에 사용할 수 있다.@폴더명으로 경로를 설정하여 해당 페이지 내의layout.js에서 이 폴더명을 props로 받아 사용한다.위 사진과 같이 app 하위에@team과 @analytics폴더를 생성하여 경로의 layout.js에서 children뿐만 아니라 team과 analytics를 받아 한 페이지 내에 여러 페이지 UI를 구성할 수 있다. 경로에는 영향을 주지 않으므로app/@폴더명의 경로로는 접근할 수 없다. 만약 병렬 라우트 하위에 여러 페이지가 존재하고 같은 레이아웃을 설정하고 싶다면 @폴더명/lay..