作成: 更新:
AMPを導入する(Next.js + tailwind.css + Typescript)
この記事は最終更新日から11か月以上が経過しています。
このエントリーは約1分で読めます。
AMP is 何?
- Accelerated Mobile Pages
- モバイルページを高速に表示させる手法
How to AMP
前提
フロー
- 前準備
- tailwindcssの共通コンポーネントを小さくする
- _document.tsx#getInitialProps の戻り値を変更する
- 実装
- 実装したい
[NextPage].tsx
にexport const config = { amp: 'hybrid' }
- markdownでCDNで読み込んでたスタイルシートをインラインで読み込む
- 実装したい
AMP Validatorで発生しているエラーを解消する
The parent tag of tag 'style[amp-keyframes]' is 'head', but it can only be 'body'.
head
に存在するamp-keyframes
で調べる- 今回だと以下のような内容がヒット
<style amp-keyframes=''> @keyframes spin { to { transform: rotate(1turn); } } @keyframes ping { 75%, to { opacity: 0; transform: scale(2); } } @keyframes pulse { 50% { opacity: 0.5; } } </style>
- これはGrassGraphさんのサービスで取得したGithubの草グラフ画像をAPIから取得したときに
内部的にcssでkeyframeをしていた為に発生していると思われる
????