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

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

AMP를 Next.js 앱에 추가할 수 있는 두 가지 방법을 시도해 보세요.

Houssein Djirdeh

학습 내용

이 Codelab에서는 Next.js 앱에서 AMP를 사용하는 두 가지 방법을 시도해 볼 수 있습니다. Next.js 앱에서 AMP가 속도를 보장하는 방법을 확인하여 Next.js 앱에 AMP 지원을 추가하는 것이 좋습니다.

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

하이브리드 AMP 접근 방식을 사용하면 Next.js 페이지의 함께 제공되는 AMP 버전이 생성됩니다. 과거 하이브리드 접근 방식은 기본 버전의 기본 버전에 대한 경험이 있을 때 자주 사용되었습니다. 페이지가 표시됩니다. 메인 버전에는 완전한 경험을 제공하는 반면 AMP 페이지에는 다소 성능이 저하된 환경입니다. amp-script를 도입하면서 하이브리드 접근 방식에 대해 설명하지만, 여전히 필요한 경우에 대비하여 여기서 다룹니다.

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

import React from 'react'

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

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

export default Home;

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

페이지가 AMP로 제공된다는 내용의 라이브 페이지 및 Chrome DevTools 콘솔의 메시지

페이지에 <p> 태그가 하나만 있으므로 확인할 수 있습니다.

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

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

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

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

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;