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%のパフォーマンス改善）
ページにはユーザーがアクセス可能な（最適化された）バージョンと、検索エンジンでインデックス可能な（最適化されていない）バージョンがあります

ハイブリッド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フックです。