useAmp

AMP 対応は私たちの高度な機能の 1 つで、ここで AMP について詳しく読むことができます。

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

export const config = { amp: true }

amp config は以下の値を受け入れます：

• true - そのページは AMP 専用となります
• 'hybrid' - このページには 2 つの Version があり、一つは AMP、もう一つは HTML となります。

ampや config について詳しく知りたい場合は、以下のセクションをお読みください。

AMP First Page

次の例をご覧ください：

export const config = { amp: true }

function About(props) {
  return <h3>My AMP About Page!</h3>
}

export default About

上記のページは AMP-only ページであり、それはつまり：

• そのページには Next.js や React の Client サイドの runtime がありません
• このページは、AMP キャッシュと同じ変換を適用する最適化ツールであるAMP Optimizer によって自動的に最適化され、パフォーマンスは最大 42％向上します
• このページには、ユーザーがアクセス可能な(最適化された)version のページと、検索エンジンがインデックス化可能な(unoptimized)version のページがあります。

Hybrid AMP Page

次の例をご覧ください：

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(default)と AMP HTML(?amp=1を URL に追加することで)でレンダリングされます。
• そのページの AMP version は、AMP Optimizer を使用して有効な最適化のみが適用され、検索エンジンで索引付けできるようになっています

このページはuseAmpを使ってモードを区別し、それはReact Hook という、ページが AMP を使っている場合はtrueを、それ以外の場合はfalseを返すものです。