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 を返します。