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%のパフォーマンス向上が可能）
• ユーザーアクセス可能な（最適化済み）バージョンと、検索エンジンインデックス用の（未最適化）バージョンが存在します

ハイブリッド 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 を使用しています。これは React フックで、ページが AMP を使用している場合は true を、そうでない場合は false を返します。