AMP를 Next.js 앱에 추가할 수 있는 두 가지 방법을 시도해 보세요.
학습 내용
이 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 버전이 렌더링되고 있는 것을 확인할 수 있습니다.
페이지에 <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;