AMPコンポーネントの追加

AMPコミュニティは、よりインタラクティブなAMPページを作成するのに役立つ たくさんのコンポーネント を提供しています。 Next.js はページで使用されるすべてのコンポーネントを自動的にインポートするので、AMPコンポーネントのスクリプトを手動でインポートする必要はありません:

export const config = { amp: true };

function MyAmpPage() {
  const date = new Date();

  return (
    <div>
      <p>Some time: {date.toJSON()}</p>
      <amp-timeago width="0" height="15" datetime={date.toJSON()} layout="responsive">
        .
      </amp-timeago>
    </div>
  );
}

export default MyAmpPage;

上記の例では、 amp-timeago コンポーネントを使用しています。

デフォルトでは、最新バージョンのコンポーネントが常にインポートされます。バージョンをカスタマイズしたい場合は、次の例のように next/head を使用して下さい:

import Head from 'next/head';

export const config = { amp: true };

function MyAmpPage() {
  const date = new Date();

  return (
    <div>
      <Head>
        <script
          async
          key="amp-timeago"
          custom-element="amp-timeago"
          src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"
        />
      </Head>

      <p>Some time: {date.toJSON()}</p>
      <amp-timeago width="0" height="15" datetime={date.toJSON()} layout="responsive">
        .
      </amp-timeago>
    </div>
  );
}

export default MyAmpPage;