[Next.js 번역 프로젝트] 최적화

아래는 Next.js 번역 프로젝트에 참여하게 되면서 내가 맡게 된 Optimizing 챕터의 메인 화면을 번역한 내용입니다.

* 마크다운은 블로그로 글을 옮기면서 티스토리에서 호환되지 않는 요소가 있습니다.

* 내용이나 마크다운 등은 보다 나은 가독성과 UI를 위해 최소한으로 변경되었습니다.

* 해당 포스팅은 기록을 위한 것으로 일부 링크는 현재 페이지에서 작동하지 않습니다.

최적화

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

내장 컴포넌트는 일반적인 UI 최적화 구현의 복잡성을 추상화합니다. 다음과 같은 컴포넌트가 있습니다 :

이미지 : 기본 <img> 엘리먼트를 기반으로 합니다. 이미지 컴포넌트는 이미지 성능을 최적화하기 위해 이미지를 지연 로딩(lazy loading)하며, 디바이스 크기에 따라 이미지의 크기를 자동으로 조정합니다.
링크 : <a>태그를 기반으로 합니다. Link 컴포넌트는 더 빠르고 부드러운 페이지 전환을 위해 백그라운드에서 페이지를 미리 로드(prefetch)합니다.
스크립트 : <script> 태그를 기반으로 합니다. 스크립트 컴포넌트를 사용하면 써드파티 스크립트의 로드 및 실행을 제어할 수 있습니다.

메타데이터는 검색 엔진이 콘텐츠를 더 잘 이해하도록 도와주며(이는 더 나은 SEO로 이어질 수 있음) 콘텐츠가 소셜 미디어에서 어떻게 표현될지를 커스터마이징할 수 있도록 하여 다양한 플랫폼에서 보다 호감을 주고 일관된 사용자 경험을 만들 수 있습니다.

Next.js의 메타데이터 API를 사용하면 페이지의 <head> 엘리먼트를 수정할 수 있습니다. 다음의 두 가지 방법으로 메타데이터를 구성할 수 있습니다.

구성 기반 메타데이터 : layout.js 또는 page.js 파일에서 정적 메타데이터 개체 또는 동적 generateMetadata 함수를 내보냅니다.
파일 기반 메타데이터 : 라우트 세그먼트(segment)에 정적 또는 동적으로 생성된 특수 파일을 추가합니다.

또한, imageResponse 생성자와 함께 JSX 및 CSS를 사용하여 동적 오픈 그래프 이미지를 생성할 수 있습니다.

Next.js /public폴더는 이미지, 글꼴 및 기타 파일과 같은 정적 자산(assets)을 제공하는 데 사용할 수 있습니다. /public 내부의 파일은 CDN 제공자(providers)에 의해 캐시될 수 있어 효율적으로 전달될 수 있습니다.

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

이미지	내장된 next/image 컴포넌트를 사용하여 이미지를 최적화하세요.
글꼴	내장된 next/font 로더를 사용하여 애플리케이션의 웹 글꼴을 최적화하세요.
스크립트	내장 스크립트 컴포넌트로 써드파티 스크립트를 최적화하세요.
메타데이터	메타데이터 API를 사용하여 모든 레이아웃 또는 페이지에서 메타데이터를 정의하세요.
정적 assets	Next.js를 사용하면 public 디렉터리에서 이미지와 같은 정적 파일을 제공할 수 있습니다.
지연 로딩	가져온 라이브러리 및 React 컴포넌트를 지연 로드하여 애플리케이션의 로딩 성능을 향상시킬 수 있습니다.
분석	Next.js Speed Insights를 사용하여 페이지 성능을 측정 및 추적할 수 있습니다.
OpenTelemetry	OpenTelemetry를 사용하여 Next.js 앱을 계측하는 방법을 알아보세요.
계측(Instrumentation)	Next.js 앱에서 서버 시작 시 계측을 사용하여 코드를 실행하는 방법을 알아보세요.

728x90

[Next.js 번역 프로젝트] 최적화 > 메타데이터 (Metadata) (0)	2023.05.06
[Next.js 번역 프로젝트] 최적화 > 이미지 (Images) (0)	2023.05.06
[Next.js 번역 프로젝트] 최적화 > 글꼴 (Fonts) (0)	2023.05.06
[Next.js 베타 번역 프로젝트] 이미지 생성 (Image Generation) -> 정식 버전에서 챕터 삭제됨 (0)	2023.05.03
[Next.js 번역 프로젝트] 오픈소스 기여한 과정 (단계) (0)	2023.05.03