next/amp

AMP サポートは Next.js の高度な機能の 1 つです。詳細については、こちらをご覧ください。

AMP を有効にするには、次の設定をページに追加します:

export const config = { amp: true };

amp の設定は次の値を受け付けます:

  • true - ページは AMP-only になります
  • 'hybrid' - ページは AMP を使用したものと HTML を使用したものの 2 つのバージョンを持ちます

amp の詳細設定については、以下のセクションをご覧ください。

AMP の最初のページ

次の例をご覧ください:

export const config = { amp: true };

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

export default About;

上のページは AMP-only のページです。つまり:

  • ページには Next.js または React によるクライアント側のランタイムがありません
  • ページは AMP Optimizer によって自動的に最適化されます。AMP Optimizer は AMP キャッシュと同様の変換をするオプティマイザであり、パフォーマンスを最大 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 を使用してモードを区別しています。 useAmp はページが AMP を使用している場合は true を返し、そうでない場合は false を返す React Hook です。