AMP

Examples

AMP (opens in a new tab)

Next.js를 사용하면 최소한의 설정만으로 React 환경을 벗어나지 않고도 모든 React 페이지를 AMP 페이지로 쉽게 변환할 수 있습니다.

AMP에 대해 자세히 알아보려면 공식 amp.dev (opens in a new tab) 사이트를 방문해 보세요.

Enabling AMP

AMP를 페이지에서 활성화하고 다양한 AMP 설정에 대해 더 알아보려면 next/amp의 API 문서를 읽어보세요.

Caveats

현재 AMP 페이지에서는 CSS-in-JS만 지원되며, CSS Modules는 지원되지 않습니다. Next.js에 CSS Modules 지원을 직접 기여하실 수 있습니다. (opens in a new tab)

Adding AMP Components

AMP 커뮤니티는 AMP 페이지를 더욱 인터랙티브하게 만들기 위해 다양한 컴포넌트 (opens in a new tab)를 제공합니다. Next.js는 페이지에서 사용되는 모든 AMP 컴포넌트를 자동으로 가져오기 때문에 AMP 컴포넌트 스크립트를 수동으로 가져올 필요가 없습니다:

export const config = { amp: true }
 
function MyAmpPage() {
  const date = new Date()
 
  return (
    <div>
      <p>Some time: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}
 
export default MyAmpPage

위 예제는 amp-timeago (opens in a new tab) 컴포넌트를 사용합니다.

기본적으로 항상 최신 버전의 컴포넌트를 가져옵니다(import). 버전을 커스터마이징하여 사용하려면 next/head를 사용해 다음과 같이 사용할 수 있습니다:

import Head from 'next/head'
 
export const config = { amp: true }
 
function MyAmpPage() {
  const date = new Date()
 
  return (
    <div>
      <Head>
        <script
          async
          key="amp-timeago"
          custom-element="amp-timeago"
          src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"
        />
      </Head>
 
      <p>Some time: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}
 
export default MyAmpPage

AMP Validation

AMP 페이지는 개발 중에 amphtml-validator (opens in a new tab)를 통해 자동으로 검증됩니다. 오류와 경고는 터미널에 출력됩니다.

정적 HTML 내보내기 중에도 페이지가 검증되며, 경고나 오류는 터미널에 출력됩니다. AMP 오류가 있을 경우, 내보내기(export)는 상태 코드 1로 종료되며, 이는 내보내기(export)가 유효한 AMP가 아니기 때문입니다.

Custom Validators

다음과 같이 next.config.js에서 커스텀 AMP validator를 설정할 수 있습니다:

module.exports = {
  amp: {
    validator: './custom_validator.js',
  },
}

Skip AMP Validation

AMP 검증을 비활성화하려면 next.config.js에 다음 코드를 추가하세요:

experimental: {
  amp: {
    skipValidation: true
  }
}

AMP in Static HTML Export

정적 HTML 내보내기 기능을 사용하여 페이지를 정적으로 사전 렌더링(prerender)할 때, Next.js는 페이지가 AMP를 지원하는지 감지하고 이에 따라 내보내기(export) 동작을 변경합니다. 예를 들어, 하이브리드 AMP 페이지 pages/about.js는 다음과 같이 출력됩니다:

out/about.html - 클라이언트 사이드에서 실행되는 HTML 페이지
out/about.amp.html-AMP - AMP 페이지

그리고 만약 pages/about.js가 AMP-only 페이지일 경우:

out/about.html - 최적화된 AMP 페이지

Next.js는 HTML 버전에 페이지의 AMP 버전 링크를 자동으로 삽입하므로 이를 직접 추가할 필요가 없습니다. 예를 들어:

<link rel="amphtml" href="/about.amp.html" />

그리고 페이지의 AMP 버전에는 HTML 페이지에 대한 링크가 다음과 같이 포함됩니다:

<link rel="canonical" href="/about" />

trailingSlash가 활성화된 경우, 내보내지는 pages/about.js 페이지의 결과는 다음과 같습니다:

out/about/index.html - HTML 페이지
out/about.amp/index.html - AMP 페이지

TypeScript

현재 AMP는 TypeScript를 위한 내장 타입을 제공하지 않지만, 이는 로드맵(#13791 (opens in a new tab))에 포함되어 있습니다.

대안으로, 프로젝트 내에 amp.d.ts라는 파일을 수동으로 생성하고 다음과 같은 사용자 정의 타입 (opens in a new tab)을 추가할 수 있습니다.

MDX Babel