Next.js — AMP対応

sugam

7 min readApr 29, 2019

概要

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の使い分けについて、どういったケースはどちらが良いなどまだ分かっていないことがありますので、今後実務で使うことがあれば深掘りしたいと思います。

Next.js — AMP対応

概要

対象読者

Next.jsがAMP対応したみたいです

対応方法

Hybrid

AMP-only (default)

実装

環境

アプリケーションの雛形を作成します

Hybrid AMP Pages

AMP-only (default)

まとめ

Written by sugam