Menu

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 Hookです。