Next.js で AMP ページを作る
Next.js では簡単に AMP ページを開発することができる。
Next.js v8 での方法
withAmp の HoC が用意されているので、関数でコンポーネントをはさみこむ。
import { withAmp } from ‘next/amp’
function Home() {
return <p>Welcome to Next.js.</p>
}
export default withAmp(Home)
Next.js v9 での方法
{amp: true} の config を export する。
export config = {amp: true}
function Home() {
return <p>Welcome to Next.js.</p>
}
export default Home
AMP optimizer の動作
Next.js v8
amp-optimizer v0.5 系が動作する。
next v8（というか optimizer v0.5.2）だと、optimizerに validAMP というconfigがあって、
validな状態を保持するオプションがあり、query に amp があるときだけ、validAMPをtrueにしてoptimizerを回す。
なので、next v8だと、?amp=1 のときは valid, ついてないときは optimized になっている。
つまり検索エンジンには、 ?amp=1 、直接アクセスしてきたユーザには / にアクセスしてもらうようにしなければならない。
next.js/optimize-amp.ts at 0dbd3b98eca0bee01a05b8414a60c48abba76abd · zeit/next.js · GitHub
Next.js v9
amp-optimizer v1 系が動作する。
next.js/optimize-amp.ts at canary · zeit/next.js · GitHub
amp-optimizer v1 では、validAMPオプションはなく、default で AMP validなものとなるようになった。
つまり、Next.js v8 のときのように検索エンジンに対しては ?amp=1 をつけたhtmlを返すといった対処は必要なくなる。
