🚀

【Next.js和訳】Advanced Features/AMP Support

2021/10/02に公開・約3,900字

Next.js

tech

この記事について

この記事は、Advanced Features/AMP Supportの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

AMP Support

Examples

Next.js を使えば、最小限の設定で、React を離れることなく、あらゆる React ページを AMP ページにすることができます。

AMP については、amp.devの公式サイトで詳しく紹介されています。

AMP を有効にする

ページの AMP サポートを有効にするには、API documentation for next/ampを参照してください。

警告

CSS-in-JS のみがサポートされています。CSS モジュールは、現時点では AMP ページでサポートされていません。Next.js への CSS モジュールサポートの貢献が可能です。

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 Validation

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

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

Validators をカスタム

カスタム AMP Validators は、next.config.js で以下のように設定します。

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

AMP Validation をスキップ

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

experimental: {
  amp: {
    skipValidation: true
  }
}

AMP を静的な HTML でエクスポート

next export を使用して Static HTML export のスタティックプリレンダーを行う場合、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 というファイルを手動で作成し、これらのカスタムタイプを追加することができます。

Discussion

ログインするとコメントできます