Next.jsでAMPページを作成する方法

例

Next.jsを使用すると、最小限の設定でReactページをAMPページに変換できます。Reactの枠組みを離れる必要はありません。

AMPの詳細については、公式サイトamp.devでご覧いただけます。

AMPの有効化

ページでAMPサポートを有効にする方法や、さまざまなAMP設定について詳しく知るには、next/ampのAPIドキュメントをお読みください。

注意点

CSS-in-JSのみサポートされています。現在のところ、AMPページではCSS Modulesはサポートされていません。Next.jsへのCSS Modulesサポートの貢献に参加できます。

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バリデーションのスキップ

AMPバリデーションを無効にするには、next.config.jsに次のコードを追加します：

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は自動的にAMPバージョンのページへのリンクをHTMLバージョンに挿入するため、以下のように手動で行う必要はありません：

<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ファイルを手動で作成し、これらのカスタム型を追加できます。

Next.jsでAMPページを作成する方法

On this page