이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Next.js에서 AMP를 사용하는 방법

Next.js 앱에 AMP를 추가하는 두 가지 방법 사용해 보기

후세인 지르데

학습 내용

이 Codelab에서는 Next.js 앱에서 AMP를 사용하는 두 가지 방법을 시도해 볼 수 있습니다. AMP가 Next.js 앱에서 빠른 속도를 보장하는 방법에서 Next.js 앱에 AMP 지원을 추가할 수 있는 이유를 알아보세요.

하이브리드 AMP 페이지를 만드는 방법

하이브리드 AMP 접근 방식은 Next.js 페이지의 수반된 AMP 버전을 만듭니다. 이전에는 기본 버전의 페이지에 AMP가 지원할 수 없는 환경이 있을 때 하이브리드 방식이 자주 사용되었습니다. 기본 버전은 완전한 환경을 제공했지만 AMP 페이지의 환경은 약간 저하되었습니다. amp-script가 도입되면서 하이브리드 접근 방식이 더 많이 필요하지는 않지만, 필요한 경우를 대비하여 여기서 다룹니다.

Next.js가 페이지를 렌더링하고 제공하는 방식을 구성하는 방법에는 여러 가지가 있습니다. config 객체를 사용하면 페이지별로 수정할 수 있습니다. 특정 페이지를 AMP 페이지로 제공하려면 객체에서 amp 속성을 내보내야 합니다.

import React from 'react'

export const config = { amp: 'hybrid' };

const Home = () => (
  <p>This is the home page</p>
);

export default Home;

리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
사이트를 미리 보려면 View App을 누른 다음 Fullscreen 을 누릅니다.
URL 끝에 ?amp=1를 추가합니다. 페이지는 똑같아 보이지만 콘솔을 살펴보면 페이지의 AMP 버전이 렌더링되는 것을 확인할 수 있습니다.

페이지가 AMP로 제공된다는 사실을 알리는 Chrome DevTools 콘솔의 라이브 페이지 및 메시지

페이지에 <p> 태그가 하나만 있으므로 기본 페이지와 AMP 버전 간에 눈에 띄는 차이가 없습니다.

AMP 구성요소를 조건부로 제공하는 방법

AMP 페이지에는 여러 HTML 요소 대신 유효한 자체 구성요소 세트가 있어야 합니다. AMP 구성요소가 AMP 페이지에만 조건부로 제공되는지 확인하는 것이 중요합니다. Next.js는 요청된 페이지 버전에 따라 조건부로 다양한 요소를 제공할 수 있도록 useAmp라는 후크를 제공합니다.

소스를 보려면 소스 보기를 누릅니다.

기본 버전과 AMP 버전이 요청되었는지에 따라 페이지에 다른 단락 요소를 렌더링하도록 pages/index.js를 수정합니다.

import React from 'react';
import { useAmp } from 'next/amp';

export const config = { amp: 'hybrid' };

const Home = () => (
  useAmp() ? (
    <p>This is the <strong>AMP</strong> version of the home page</p>
  ) : (
    <p>This is the main version of the home page</p>
  )
);

export default Home;

페이지의 기본 버전을 로드합니다.
URL 끝에 ?amp=1를 다시 추가하여 페이지의 AMP 버전을 로드합니다.

이미지 태그 대신 AMP를 대체하는 amp-img를 렌더링해 보세요.

import React from 'react';
import { useAmp } from 'next/amp';

export const config = { amp: 'hybrid' };

const imgSrc = 'https://placekitten.com/1000/1000';

const Image = () => (
  useAmp() ? (
    <amp-img alt="A cute kitten"
      src={imgSrc}
      width="1000"
      height="1000"
      layout="responsive">
    </amp-img>
  ) : (
    <img alt="A cute kitten"
      src={imgSrc}
      width="1000"
      height="1000">
    </img>
  )
);

const Home = () => (
  <div>
    <Image />
  </div>
);

export default Home;

layout="responsive"는 너비와 높이로 지정된 가로세로 비율로 완전 반응형 이미지를 자동으로 렌더링합니다. AMP 요소의 지원되는 레이아웃에 관해 자세히 알아보려면 레이아웃 및 미디어 쿼리를, 요소의 최적화에 관한 자세한 내용은 amp-img를 확인하세요.

페이지의 기본 버전을 다시 봅니다.
페이지의 AMP 버전을 다시 봅니다.

AMP 전용 페이지를 만드는 방법

Next.js는 AMP 전용 페이지도 지원합니다. 이 방법을 사용하면 항상 단일 AMP 페이지가 사용자와 검색엔진에 제공되고 렌더링됩니다.

AMP 전용 페이지를 렌더링하려면 config 객체의 amp 속성 값을 true로 변경합니다.

import React from 'react'

export const config = { amp: true };

const Home = () => (
  <p>This is an AMP-only page</p>
);

export default Home;