コンテンツにスキップ
APIリファレンス関数useAmp

useAmp

例

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

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

pages/index.js
export const config = { amp: true }

amp 設定には、次の値を使用できます

  • true - ページはAMPのみになります
  • 'hybrid' - ページにはAMPバージョンとHTMLバージョンの2つのバージョンがあります

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

AMPファーストページ

次の例をご覧ください

pages/about.js
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ページ
pages/about.js
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 を使用します。これは、ページがAMPを使用している場合は true を返し、それ以外の場合は false を返す React Hook です。