🚀

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

2021.10.02に公開

Next.js

tech

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、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

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