useAmp

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

AMPを有効にするには、ページに以下の設定を追加してください

export const config = { amp: true }

amp 設定は以下の値を受け入れます

• true - ページはAMPのみになります
• 'hybrid' - ページには2つのバージョンがあります。1つはAMP、もう1つはHTMLです

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

AMP First ページ

以下の例をご覧ください

export const config = { amp: true }
 
function About(props) {
  return <h3>My AMP About Page!</h3>
}
 
export default About

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

• このページにはNext.jsまたはReactのクライアントサイドランタイムがありません
• このページは、AMPキャッシュと同じ変換を適用する最適化ツールであるAMP Optimizerによって自動的に最適化されます（パフォーマンスが最大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を使用しています。これは、ページがAMPを使用している場合はtrueを返し、そうでない場合はfalseを返すReact Hookです。