Next.jsでAMPのサンプルを最速で試す
完全なる自分用メモ(備忘録)
下記を参考にすればOK
(Next.jsのAMPのサンプル)
以下のコマンドを順に実行すればAMPのサンプルページが立ち上がる。
あとは localhost:3000にアクセスするだけ。
yarn create next-app --example amp amp-app cd amp-app yarn dev
実際にコードを見てみるとAMPのexampleだけあって amp-img を使用しているなど AMP ならではの書き方になっているので、例えば、最初からAMP対応を想定したサイトを作成する場合は、とても参考になる。
開発時は yarn dev で実行していくことになると思うが、実際にデプロイするときは下記の手順を踏む。
(普通にNext.jsでデプロイするとき特に変わらない)
yarn build # cloneした段階だと "export"コマンドは定義されていなかったので、直接叩いている # outディレクトリ内にamp対応のhtmlがexportされたのが分かる yarn next export yarn start
以上でAMP対応したNext.jsのHTMLを生成できる。
例えば、Netlifyなどでデプロイするときは、build と export コマンドを組み合わせて Build command を定義し、Publish directory を out ディレクトリに指定すればOK。
AMP対応を行う際に便利なChrome拡張 - AMP Validator
ちなみにAMPが効いているかどうかを判断するために下記のChromeの拡張機能を入れておくと良いようだ。
(なお、next.js の AMP 有効時( yarn dev 実行時)は 必ず1件はエラーになるよう。詳細は下記に貼ったmizuchi氏のポストを参照)
ちなみに export後に yarn start してアクセスすると、今度はChrome拡張のAMPアイコンが緑になっているのが分かる。
実際のリリース後の挙動はこうなる。
その他AMP with Next.js 関連の日本語の情報だと、最近のmizuchi氏のポストが小気味よくまとまっていて、分かりやすいと感じた。
(あまり日本語の情報を漁っていたわけではないので、厳選しているというわけではないが、とても読みやすかった)
ちなみに上で書いたNext.jsとは関係ないのだが、勉強がてら静的なHTMLで構成したペラサイトをAMP対応させようと作業しているが、なかなか苦労している。
苦労している要因としては、AMPに対応していない動きがある処理があったり、対応していないCSS構文が書かれていたりするためである。これらをAMPの制限がある側に寄せていくのがけっこう大変。
下記のドキュメントを見ながら作業しているが、こういうときにAMPだとどうすればよいかというところを一つ一つ潰している地道な道のりとなっている。
