최적화

Next.js는 애플리케이션의 속도와 Core Web Vitals를 향상시키기 위해 설계된 다양한 내장 최적화 기능을 제공합니다. 이 가이드에서는 사용자 경험을 향상시키기 위해 활용할 수 있는 최적화에 대해 다룰 것입니다.

내장 컴포넌트

내장 컴포넌트는 일반적인 UI 최적화를 구현하는 복잡성을 추상화합니다. 이러한 컴포넌트들은 다음과 같습니다:

Images: 네이티브 <img> 요소를 기반으로 합니다. Image 컴포넌트는 지연 로딩과 기기 크기에 따른 자동 이미지 크기 조정을 통해 성능을 최적화합니다.
Link: 네이티브 <a> 태그를 기반으로 합니다. Link 컴포넌트는 백그라운드에서 페이지를 프리페치하여 더 빠르고 부드러운 페이지 전환을 제공합니다.
Scripts: 네이티브 <script> 태그를 기반으로 합니다. Script 컴포넌트는 타사 스크립트의 로딩과 실행을 제어할 수 있게 해줍니다.

메타데이터는 검색 엔진이 콘텐츠를 더 잘 이해할 수 있도록 도와주며(SEO 향상으로 이어질 수 있음), 소셜 미디어에서 콘텐츠가 표시되는 방식을 사용자 정의할 수 있게 해줍니다. 이를 통해 다양한 플랫폼에서 더 매력적이고 일관된 사용자 경험을 만들 수 있습니다.

Next.js의 메타데이터 API를 사용하면 페이지의 <head> 요소를 수정할 수 있습니다. 메타데이터를 구성하는 방법에는 두 가지가 있습니다:

Config-based Metadata: layout.js 또는 page.js 파일에서 정적 metadata 객체나 동적 generateMetadata 함수를 내보냅니다.
File-based Metadata: 라우트 세그먼트에 정적 또는 동적으로 생성된 특별한 파일을 추가합니다.

또한, imageResponse 생성자를 사용하여 JSX와 CSS로 동적 Open Graph 이미지를 생성할 수 있습니다.

Next.js의 /public 폴더는 이미지, 폰트 및 기타 파일과 같은 정적 리소스을 제공하는 데 사용할 수 있습니다. /public 내의 파일은 CDN 제공업체에 의해 캐시될 수 있어 효율적으로 전달됩니다.

대규모 애플리케이션의 경우, Next.js는 인기 있는 분석 및 모니터링 도구와 통합되어 애플리케이션의 성능을 이해하는 데 도움을 줍니다. 자세한 내용은 OpenTelemetry 및 Instrumentation 가이드를 참조하세요.