【Next.js和訳】Advanced Features/AMP Support
この記事について
この記事は、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