Lang x Lang

AMP

Examples

Next.js を使うと、React のページを最小限の config で、そして React から離れずに AMP ページに変換することができます。

あなたは公式の amp.dev サイトで AMP についてさらに詳しく読むことができます。

Enabling AMP

ページに AMP サポートを有効にし、さまざまな AMP 設定について詳しく学ぶには、next/ampの[API ドキュメンテーション]をお読みください。

Caveats

Adding AMP Components

AMP コミュニティは、AMP ページをよりインタラクティブにするための多くの Component を提供しています。Next.js は自動的にページで使用されているすべての Component を import し、手動で AMP の component scripts を import する必要はありません。

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 の component が使用されています。

default として、component の最新の version が常にインポートされます。version をカスタマイズしたい場合は、次の例のように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 Validation

AMP ページは、amphtml-validator によって development の間に自動的に検証されます。エラーや警告は、 Next.js を開始したターミナルに表示されます。

ページはStatic HTML exportの間でも検証され、警告/error はすべてターミナルに表示されます。なお、AMPerror がある場合、export は code が1となります。なぜなら、export は有効な AMP ではないからです。

カスタムバリデータ

以下に示すように、next.config.jsでカスタム AMP バリデーターを設定することができます:

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

AMP 検証をスキップ

next.config.jsに以下の code を追加して AMP 検証をオフにします。

experimental: {
  amp: {
    skipValidation: true;
  }
}

静的な HTML Export の中の AMP

Static HTML exportを使用して静的にプレレンダリングページを作成するとき、Next.js はそのページが AMP をサポートしているかどうかを検出し、それに基づいて export の動作を変更します。

例えば、ハイブリッド AMP ページ pages/about.js は以下のように出力されます:

  • out/about.html - Client サイドの React runtime を持つ HTML ページ
  • out/about.amp.html - AMP ページ

そして、pages/about.jsが AMP 専用ページである場合、それは次のように出力されます:

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

Next.js は、あなたが手動で行う必要なく、ページの AMP version への link を自動的に HTML version に挿入します。その具体的な方法は以下の通りです。

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

そしてあなたのページの AMP version は、HTML ページへの link を含むでしょう:

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

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

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

TypeScript

AMP は現在、TypeScript に対するビルトイン type を持っていませんが、それは彼らのロードマップ(#13791 )に含まれています。

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

当社サイトでは、Cookie を使用しています。各規約をご確認の上ご利用ください:
Cookie Policy, Privacy Policy および Terms of Use