useAmp

AMP サポートは高度な機能の1つです。AMP についての詳細はこちらをご覧ください。

AMP を有効化するには、ページに次の設定を追加します:

export const config = { amp: true }

amp 設定は次の値を受け入れます:

• true - ページは AMP 専用になります
• 'hybrid' - ページは AMP バージョンと HTML バージョンの2つのバージョンを持ちます

amp 設定の詳細については、以下のセクションをお読みください。

AMP 専用ページ

次の例を見てください:

export const config = { amp: true }

function About(props) {
  return <h3>My AMP About Page!</h3>
}

export default About

上記のページは AMP 専用ページであり、次のことを意味します:

• ページには Next.js や React のクライアントサイドランタイムが含まれません
• ページは AMP Optimizer によって自動的に最適化されます（AMP キャッシュと同じ変換が適用され、最大42%のパフォーマンス向上が可能）
• ページにはユーザーアクセス用（最適化済み）と検索エンジンインデックス用（未最適化）の2つのバージョンが存在します

ハイブリッド AMP ページ

次の例を見てください:

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

上記のページはハイブリッド AMP ページであり、次のことを意味します:

• ページは従来の HTML（デフォルト）と AMP HTML（URL に ?amp=1 を追加）の両方でレンダリングされます
• AMP バージョンのページには、検索エンジンによるインデックスが可能なように AMP Optimizer による有効な最適化のみが適用されます

このページでは useAmp を使用してモードを判別しています。useAmp は React フック で、ページが AMP を使用している場合は true を、そうでない場合は false を返します。