コンテンツへスキップ
アプリケーションの構築設定AMP

AMP

例

Next.js を使用すると、最小限の設定で、React を離れることなく、任意の React ページを AMP ページに変換できます。

AMP の詳細については、公式のamp.dev サイトをご覧ください。

AMPの有効化

ページでAMPサポートを有効にする方法、および様々なAMP設定の詳細については、`next/amp` のAPIドキュメントをご覧ください。

注意点

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

AMP検証

AMPページは開発中にamphtml-validatorを使用して自動的に検証されます。エラーと警告は、Next.jsを開始したターミナルに表示されます。

ページは静的HTMLエクスポート時にも検証され、警告/エラーはターミナルに出力されます。AMPエラーが発生すると、エクスポートが有効なAMPではないため、ステータスコード1でエクスポートが終了します。

カスタムバリデータ

下記のように`next.config.js`にカスタムAMPバリデータを設定できます。

module.exports = {
  amp: {
    validator: './custom_validator.js',
  },
}

AMP検証のスキップ

`next.config.js`に以下のコードを追加して、AMP検証をオフにします。

experimental: {
  amp: {
    skipValidation: true
  }
}

静的HTMLエクスポートにおけるAMP

静的HTMLエクスポートを使用して静的にプリレンダリングされたページの場合、Next.jsはページがAMPをサポートしているかどうかを検出し、それに基づいてエクスポート動作を変更します。

例えば、ハイブリッドAMPページ`pages/about.js`は以下を出力します。

  • `out/about.html` - クライアントサイドReactランタイムを含むHTMLページ
  • `out/about.amp.html` - AMPページ

`pages/about.js`がAMP専用のページの場合、以下を出力します。

  • `out/about.html` - 最適化されたAMPページ

Next.jsは、以下のようにHTMLバージョンにページのAMPバージョンのリンクを自動的に挿入するため、ユーザーが手動で行う必要はありません。

<link rel="amphtml" href="/about.amp.html" />

そして、ページのAMPバージョンにはHTMLページへのリンクが含まれます。

<link rel="canonical" href="/about" />

trailingSlashが有効になっている場合、`pages/about.js`のエクスポートされたページは以下のようになります。

  • `out/about/index.html` - HTMLページ
  • `out/about.amp/index.html` - AMPページ

TypeScript

現在、AMPにはTypeScriptの組み込み型がありませんが、ロードマップに含まれています(#13791)。

回避策として、プロジェクト内に`amp.d.ts`という名前のファイルを手動で作成し、これらのカスタム型を追加できます。