Next.jsでAMPページを作成する方法
例
Next.jsを使用すると、最小限の設定で、Reactを離れることなく、任意のReactページをAMPページに変換できます。
AMPについての詳細は、公式サイトamp.devで確認できます。
AMPの有効化
ページでAMPサポートを有効にする方法と、さまざまなAMP設定について詳しく知るには、next/amp
のAPIドキュメントをお読みください。
注意点
- 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検証
AMPページは開発中にamphtml-validatorによって自動的に検証されます。エラーや警告はNext.jsを起動したターミナルに表示されます。
ページは静的HTMLエクスポート中にも検証され、警告やエラーはターミナルに表示されます。AMPエラーがある場合、有効なAMPではないため、エクスポートはステータスコード1
で終了します。
カスタムバリデーター
以下のようにnext.config.js
でカスタムAMPバリデーターを設定できます:
module.exports = {
amp: {
validator: './custom_validator.js',
},
}
AMP検証のスキップ
AMP検証をオフにするには、next.config.js
に次のコードを追加します
experimental: {
amp: {
skipValidation: true
}
}
静的HTMLエクスポートでのAMP
静的HTMLエクスポートを使用してページを静的にプレレンダリングする場合、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は、HTMLバージョンのページにAMPバージョンへのリンクを自動的に挿入するため、手動で行う必要はありません:
<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
というファイルを手動で作成し、これらのカスタム型を追加できます。