HOME > BLOG > AMPを導入する(Next.js + tailwind.css + Typescript)
作成: 更新:

AMPを導入する(Next.js + tailwind.css + Typescript)

LINE
この記事は最終更新日から11か月以上が経過しています。
このエントリーは約1分で読めます。
ampnextjsssggooglejamstacktypescript

AMP is 何？

  • Accelerated Mobile Pages
  • モバイルページを高速に表示させる手法

How to AMP

前提

フロー

  1. 前準備
    1. tailwindcssの共通コンポーネントを小さくする
    2. _document.tsx#getInitialProps の戻り値を変更する
  2. 実装
    1. 実装したい [NextPage].tsx に export const config = { amp: 'hybrid' }
    2. 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をしていた為に発生していると思われる

????

参考記事