Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
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フックです。