useAMP

AMP 지원은 고급 기능 중 하나이며, 여기에서 AMP에 대해 더 읽어보실 수 있습니다.

AMP를 활성화하려면, 다음과 같은 설정을 페이지에 추가하세요:

export const config = { amp: true }

amp 설정은 다음의 값을 허용합니다:

• true - 페이지가 AMP-only 상태가 됩니다
• hybrid - 페이지에 AMP 버전과 HTML 버전이 모두 존재하게 됩니다

amp 구성에 대해 더 알아보려면, 아래 섹션을 읽어보세요.

AMP First Page

다음 예제를 살펴보세요:

export const config = { amp: true }
 
function About(props) {
  return <h3>My AMP About Page!</h3>
}
 
export default About

위의 예시 페이지는 AMP-only 페이지로, 다음을 의미합니다:

• 페이지에 Next.js 또는 React 클라이언트 측 런타임이 없습니다
• 페이지는 자동으로 AMP Optimizer (opens in a new tab)로 최적화되며, 이 최적화 도구는 AMP 캐시와 동일한 변환을 적용합니다(성능이 최대 42% 향상됨)
• 페이지는 사용자 접근이 가능한 최적화된 버전과 검색 엔진에 인덱싱 가능한 최적화되지 않은 버전을 갖습니다

Hybrid AMP Page

다음 예제를 살펴보세요:

import { useAmp } from 'next/amp'
 
export const config = { amp: 'hybrid' }
 
function About(props) {
  const isAmp = useAmp()
 
  return (
    <div>
      <h3>My AMP About Page!</h3>
      {isAmp ? (
        <amp-img
          width="300"
          height="300"
          src="/my-img.jpg"
          alt="a cool image"
          layout="responsive"
        />
      ) : (
        <img width="300" height="300" src="/my-img.jpg" alt="a cool image" />
      )}
    </div>
  )
}
 
export default About

위의 예시 페이지는 Hybrid AMP 페이지로, 다음을 의미합니다:

• 페이지는 기존의 HTML(기본값)과 AMP HTML(URL에 ?amp=1 추가하는 것을 통해)로 렌더링됩니다
• 페이지의 AMP 버전은 AMP Optimizer로 적용된 유효한 최적화만 적용되어 검색 엔진에 인덱싱됩니다

이 페이지는 useAmp를 사용하여 모드를 구분하며, 이 함수(useAmp)는 페이지가 AMP를 사용하는 경우 true를, 그렇지 않은 경우 false를 반환하는 React Hook (opens in a new tab)입니다.