Next.js에는 애플리케이션의 속도와 Core Web Vitals를 개선하기 위해 설계된 다양한 내장 최적화 기능이 제공된다.
내장 컴포넌트
내장 컴포넌트는 일반적인 UI 최적화를 구현하는 복잡성을 추상화한다. 이러한 컴포넌트는 다음과 같다.
Images
네이티브 <img> 요소를 기반으로 구축된다. 이미지 컴포넌트는 이미지의 성능을 최적화하기 위해 지연 로딩 및 기기 크기에 따른 이미지 자동 조정을 수행한다.
Link
네이티브 <a> 태그를 기반으로 구축된다. 링크 컴포넌트는 페이지를 백그라운드에서 미리 가져와서 페이지 전환을 더 빠르고 부드럽게 만든다.
Scripts
네이티브 <script> 태그를 기반으로 구축된다. 스크립트 컴포넌트를 사용하면 타사 스크립트의 로딩과 실행을 제어할 수 있다.
메타데이터
메타데이터는 검색 엔진이 콘텐츠를 더 잘 이해할 수 있도록 도와준다(이는 더 좋은 SEO 결과로 이어질 수 있음). 또한, 소셜 미디어에서 콘텐츠가 어떻게 표시되는지를 사용자 정의할 수 있으며, 이를 통해 다양한 플랫폼에서 보다 매력적이고 일관된 사용자 경험을 만들 수 있다.
Next.js의 메타데이터 API를 사용하면 페이지의 <head> 요소를 수정할 수 있다.
메타데이터는 두 가지 방식으로 구성할 수 있다.
구성 기반 메타데이터(Config-based Metadata)
layout.js 또는 page.js 파일에서 정적 메타데이터 객체 또는 동적 generateMetadata 함수를 내보낸다.
파일 기반 메타데이터
경로 세그먼트에 정적 또는 동적으로 생성된 특수 파일을 추가한다.
또한, imageResponse 생성자를 사용하여 JSX 및 CSS로 동적 Open Graph 이미지를 생성할 수도 있다.
정적 자산(Static Assets)
Next.js의 /public 폴더를 사용하여 이미지, 폰트 및 기타 파일과 같은 정적 자산을 제공할 수 있다.
/public 폴더 내의 파일은 CDN 공급자에 의해 캐시될 수 있으므로 효율적으로 전달된다.
분석 및 모니터링
대규모 애플리케이션의 경우, Next.js는 인기있는 분석 및 모니터링 도구와 통합되어 애플리케이션의 성능을 이해하는 데 도움을 준다. 자세한 정보는 , OpenTelemetry, Instrumentation 를 통해 확인할 수 있다.
[ 출처 ]
https://nextjs.org/docs/app/building-your-application/optimizing
