Next14

앱 최적화# 이미지 컴포넌트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..

Next.js 13버전부터 가장 크게 변화된 점은 Page Router ➡️ App Router로 변경된 라우팅 방식이다.App Router의 핵심 기능들에 대해 알아보자. Route 설정# 기본 구조Next.js 는 기존 Page Router 에서는 pages/의 하위에 route 경로를 설정하여 페이지를 구성했다면, 이번 App Router에서는 app/폴더 하위에 경로를 설정하여 페이지를 구성한다. 하위 파일명 또한 pages/파일명.js 또는 pages/폴더명/index.js로 route가 설정되었지만 App Router에서는 app/폴더명/page.js로만 사용할 수 있다. 만약 폴더 하위에 page.js파일이 없다면 route로 인식되지 않으니 해당 폴더명의 경로로 접근해도 페이지가 뜨지 않는..