AMP
Examples
Next.js を使うと、React のページを最小限の config で、そして React から離れずに AMP ページに変換することができます。
あなたは公式の amp.dev サイトで AMP についてさらに詳しく読むことができます。
Enabling AMP
ページに AMP サポートを有効にし、さまざまな AMP 設定について詳しく学ぶには、next/amp
の[API ドキュメンテーション]をお読みください。
Caveats
- CSS-in-JS のみがサポートされています。現時点では AMP ページは CSS Modules をサポートしていません。 Next.js への CSS Modules サポートを投稿 できます。
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 を追加することができます。