NextJS에서 AMP 이미지 사용

AMP - 가속 모바일 페이지

먼저 AMP란 무엇입니까? Accelerated Mobile Page의 약자이며 웹에서 사용자 우선 경험을 쉽게 만들 수 있는 웹 구성 요소 프레임워크입니다. Google과 Twitter의 오픈 소스 프로젝트이며 정말 빠른 모바일 페이지를 만들도록 설계되었습니다. 이에 대한 자세한 내용을 보려면 official website을 확인하십시오.

Next JS가 AMP를 통합한 방법

NextJS를 사용하면 쉽게 구성할 수 있는 고급 기능을 통해 AMP 구성 요소를 앱에 쉽게 통합할 수 있습니다. 페이지별로 구성을 설정하여 각 특정 페이지를 AMP 전용 페이지(페이지에 NextJS 또는 React 클라이언트 측 런타임이 없는 경우) 또는 하이브리드 페이지(페이지가 기본적으로 기존 HTML로 렌더링되지만 URL에 ?amp=1을 추가하여 AMP HTML을 렌더링할 수 있음).

하이브리드 페이지를 코딩하는 경우 NextJS는 멋진 useAmp 후크를 제공하여 두 모드를 구별할 수 있습니다. 이를 통해 예를 들어 useAmp 이 true 을 반환하면 AMP 구성 요소를 렌더링하고 그렇지 않은 경우 일반 HTML 요소를 렌더링하는 조건부 JSX를 만들 수 있습니다. NextJS here에서 이를 설정하는 방법에 대해 자세히 알아보세요.

amp-img 구성요소

오늘 집중하고 싶은 AMP 구성 요소는 amp-img 구성 요소입니다. 이미지는 실제로 웹 페이지의 느낌과 메시지를 추가할 수 있지만 로드 시간이 느려질 수 있습니다. 다른 잠재적으로 성가신 것은 이미지가 로드되고 렌더링될 때 누적되는 레이아웃 이동으로, Google은 이에 대해 큰 불이익을 줍니다. AMP 이미지는 런타임 중에 이미지 리소스를 현명하게 관리하고 이미지의 명시적인 크기를 전달해야 하기 때문에 레이아웃 변경을 제한하기 위해 이미지를 올바른 위치에 배치하기 때문에 이 두 가지 면에서 정말 도움이 될 수 있습니다.

NextJS에서 하이브리드 AMP 이미지 구성요소를 만들고 싶다면 다음과 같이 보일 수 있습니다.

import React from 'react'
import Image from 'next/image'
import { useAmp } from 'next/amp'

export const ImageWithAmp = ({ src, alt, width, height }) => {
  const isAmp = useAmp()
  return isAmp ? (
    <amp-img src={src} alt={alt} width={width} height={height} layout="responsive" />
  ) : (
    <Image src={src} alt={alt} width={width} height={height} />
  )
}

amp-img 구성 요소의 경우 layout="responsive"은 뷰포트의 크기에 따라 가중치와 높이로 설정된 종횡비에 따라 이미지 크기가 조정됨을 의미합니다. 여기에 설정된 높이 및 너비 수치는 실제로 렌더링되는 이미지의 크기를 결정하지 않습니다. layout="responsive" 일 때 종횡비를 결정하는 데만 사용됩니다.
amp-img은 블록 요소(인라인인 표준 HTML img 요소와 비교)이므로 이미지의 최대 높이(또는 너비)를 설정하려면 amp-img을 컨테이너에 래핑해야 합니다. 해당 컨테이너의 최대 높이를 설정하십시오. 또는 대신 display: inline-block에 직접 amp-image을 설정할 수 있습니다. 다른 많은 옵션이 있으므로 official docs을 읽고 필요에 따라 이 구성 요소를 가장 잘 사용할 수 있는 방법을 확인하십시오.

NextJS Image 구성 요소의 경우 값이 제공되지 않으면 기본 레이아웃은 intrinsic입니다. 이 설정은 더 작은 뷰포트(뷰포트가 이미지의 치수 중 하나보다 작음)에 대해 이미지 치수를 축소하지만 더 큰 뷰포트에 대해서는 원래 치수를 유지합니다. official docs에는 여러분이 가지고 있는 다양한 옵션에 대한 몇 가지 정말 좋은 예가 있으므로 반드시 확인하십시오.

AMP 구성 요소 활용을 생각하고 계십니까? 어떤 구성 요소에서 사용하고 있는지 알려주세요! 저는 https://bionicjulia.com에 있습니다.