최적화 | Next.js & React: 웹 개발 센터

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

내장 컴포넌트

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

이미지: 기본 <img> 요소를 기반으로 합니다. 이미지 컴포넌트는 장치 크기에 따라 이미지를 자동으로 크기 조정하고 지연 로딩하여 성능을 최적화합니다.
링크: 기본 <a> 태그를 기반으로 합니다. 링크 컴포넌트는 더 빠르고 부드러운 페이지 전환을 위해 백그라운드에서 페이지를 미리 가져옵니다.
스크립트: 기본 <script> 태그를 기반으로 합니다. 스크립트 컴포넌트는 제3자 스크립트의 로딩 및 실행에 대한 제어를 제공합니다.

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

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

설정 기반 메타데이터: layout.js 또는 page.js 파일에 정적 메타데이터 객체나 동적 generateMetadata 함수를 내보냅니다.
파일 기반 메타데이터: 루트 세그먼트에 정적이거나 동적으로 생성된 특별한 파일을 추가합니다.

게다가, ImageResponse 생성자를 사용하여 JSX와 CSS로 동적 Open Graph 이미지를 만들 수 있습니다.

Next.js의 /public 폴더는 이미지, 폰트, 그리고 다른 파일과 같은 정적 자산을 제공하는 데 사용될 수 있습니다. /public 안의 파일들은 CDN 제공자에 의해 캐시될 수도 있어 효율적으로 제공됩니다.

대규모 어플리케이션의 경우, Next.js는 어플리케이션이 어떻게 수행되고 있는지 이해하는 데 도움을 주는 인기 있는 분석 및 모니터링 도구와 통합됩니다. OpenTelemetry 및 Instrumentation 가이드에서 더 자세한 정보를 확인할 수 있습니다.

next/image API에 대한 자세한 정보를 알아보세요.

내장된 next/font 로더로 애플리케이션의 웹 폰트를 최적화하세요.

내장된 Script 컴포넌트로 제3자 스크립트를 최적화하세요.

모든 레이아웃이나 페이지에서 메타데이터를 정의하기 위해 메타데이터 API를 사용하세요.

Next.js는 public 디렉토리에서 이미지와 같은 정적 파일을 제공할 수 있습니다. 여기서 그 작동 방식을 알 수 있습니다.

애플리케이션의 로딩 성능을 향상시키기 위해 가져온 라이브러리와 React 컴포넌트를 지연 로딩하세요.

Next.js 속도 통찰을 사용하여 페이지 성능 측정 및 추적

OpenTelemetry를 사용하여 Next.js 앱에 도구를 구성하는 방법 학습.

Next.js 앱에서 서버 시작 시 코드를 실행하는 계측도구 사용법을 배우십시오.