【Next.js和訳】API Reference/ next/amp

この記事について

この記事は、next/ampの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

next/amp

Examples

• AMP

AMP 対応は、私たちの高度な機能の一つで、AMP についてはこちらをご覧ください。

AMP を有効にするには、ページに以下の config を追加します。

export const config = { amp: true }

amp config は以下の値を受け付けます。

• true - ページは、AMP のみになります。
• hybrid - ページは、AMP と HTML の 2 つのバージョンを持ちます。

amp config の詳細については、以下のセクションをお読みください。

AMP ファーストページ

次の例を見てみましょう。

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を使用しています。これは React Hook で、ページが AMP を使用している場合はtrueを、そうでない場合はfalseを返します。