概要
Next.jsを使ったアプリケーションのAMP対応についてまとめたものです。
対象読者
- Next.jsを既に使っている方
- Next.jsに興味を持っている方
- Next.jsでのAMP対応に興味を持っている方
などなど。Next.jsやAMPに興味がある方であれば是非。
Next.jsがAMP対応したみたいです
4/16のこちらのブログに書かれています。githubのREADMEの方が詳しく書かれているのでもし興味がある方はREADMEを見てください。
対応方法
2通りの対応方法があります。
- Hybrid
- AMP-only (default)
githubのREADME内容を元に、それぞれをざっくり説明しますと以下になります。
Hybrid
単なるhtmlとしてもレンダリングできますし、AMP対応htmlとしてレンダリングすることもできます。AMP対応htmlとしてレンダリングしたい場合は、URLのパラメータに amp=1 をつけます。
HybridでAMP対応した場合、ページのAMPバージョンはAMP Optimizerで最適化されないため、検索エンジンで索引付けすることができます。
AMP-only (default)
クライアントサイドにNext.js or reactのランタイムを持ちません。
AMP OptimizerがAMPキャッシュと同じ変換を適用し、自動的に最適化されます。(最大で42%パフォーマンスが向上します)
ページにはユーザーがアクセスできる(最適化された)バージョンのページと、検索エンジンがインデックスを作成できる(最適化されていない)バージョンのページがあります。
実装
環境
- macOS Mojave 10.14.2
- yarn 1.13
アプリケーションの雛形を作成します
以下のコマンドで雛形を作成します。
$ yarn add next react react-dom
そうするとnode_modulesに上記パッケージがダウンロードされます。
1つ注意なのが、Next.jsのバージョンが8.1以上になっているかどうかです。
作成されたpackage.jsonを開いて確認してみてください。
AMP対応が8.1からなので、もしそうなっていない場合はバージョンを変更して yarn install
コマンドを実行してみてください。
次に、package.jsonに起動用scriptを追加します。
/* package.json */{
"scripts": {
"dev": "next"
},
"dependencies": {
"next": "⁸.1.0",
"react": "¹⁶.8.6",
"react-dom": "¹⁶.8.6"
}
}
これで準備完了です。
Hybrid AMP Pages
READMEを参考に進めていきます。
まずはpagesディレクトリを作成します。pages直下にhybrid.js
というファイルを作成しそこに処理を記述していくことにします。
/* pages/hybrid.js */import { withAmp } from ‘next/amp’function HybridPage() {
return <p>Welcome to Hybrid AMP Page + Next.js.</p>
}export default withAmp(HybridPage, { hybrid: true })
ポイントは、withAmp
という関数でラップしているところと、その関数に引数として{ hybrid: true }
を渡しているところです。
処理はこれだけです。
確認方法なのですが、ローカル環境でアプリケーションを立ち上げて、そのアプリケーションをブラウザから開きます。AMPに対応しているかは、developer toolsにて確認します。
$ yarn dev
yarn run v1.13.0
warning package.json: No license field
$ next
[ wait ] starting the development server …
[ info ] waiting on http://localhost:3000 …
[ ready ] compiled successfully
[ info ] ready on http://localhost:3000
[ wait ] compiling …
[ ready ] compiled successfully
[ info ] ready on http://localhost:3000
```
起動させると localhost:3000
で立ち上がりますので、ブラウザから http://localhost:3000/hybrid
にアクセスしてdeveloper toolsにて確認をしていきます。
ここで少しハマった(ドキュメントちゃんと読んでいない)のですが、上記URLだとAMP対応されているページになっていませんでした。
じゃあどうやるかというと、http://localhost:3000/hybrid?amp=1
といったようにパラメータに amp=1
とつけることがポイントでした。
パラメータをつけた上でdeveloper toolsを開き、consoleタブを見てください。以下の文字列が表示されていればAMP対応ができていることになります。
Powered by AMP ⚡ HTML — Version 1904200955460 http://localhost:3000/hybrid?amp=1
逆に amp=1
を外してアクセスすると、上記ログが出力されなくなりますので確認してみてください。
少し深掘ってみてみると、htmlソースがAMP対応とそうでない場合で異なることが分かります。ブラウザで開いたページのhtmlソースを確認してみてください。
<html amp=”” amp-version=”1904200955460" class=”i-amphtml-singledoc i-amphtml-standalone” style=”padding-top: 0px !important;”>
一部抜粋したものですが、htmlタグ内に amp
という文字列が追加されていることが分かります。これがAMP対応のhtmlソースです。
これでHybridパターンの実装と動作確認は終わりです。
AMP-only (default)
hybridとほとんど変わりません。違いといったら { hybrid: true }
引数を渡しているかいないかくらいです。
/* pages/only.js */import { withAmp } from ‘next/amp’function OnlyPage() {
return <p>Welcome to AMP only + Next.js.</p>
}export default withAmp(OnlyPage)
動作確認するために、アプリケーションを立ち上げ直します。
$ yarn dev
立ち上がったら http://localhost:3000/only
にアクセスしてdeveloper toolsのconsoleを開きます。
Powered by AMP ⚡ HTML — Version 1904200955460 http://localhost:3000/only
と出力されていればAMP対応ページになっています。
これで動作確認は終わりです。
まとめ
Next.jsにおけるAMP対応をやってみました。動作確認どうやるんだろう?と思いつつ始めましたが、実装も確認も難しく考えることはありませんでした。
ポイントは 、
withAmp
という関数でコンポーネントをラップする- developer toolsのconsoleを確認する
です。
ただ、hybridとdefaultの使い分けについて、どういったケースはどちらが良いなどまだ分かっていないことがありますので、今後実務で使うことがあれば深掘りしたいと思います。