Next.jsをAMP対応してモバイルファーストなウェブを目指す

こんにちはかみむらです。Next.js 8.1以降から、ウェブページをAMP化できるAPIが登場しました。

AMPとはAccelerated Mobile Pagesの頭文字を取った言葉です。AMP対応をすることで、高速なモバイルページを実現できます。一般的に遅いウェブページは直帰率が非常に高くなります。そして、ウェブサイトのモバイルページはPCに比べて遅くなります。そこで、モバイルのウェブページを最適化して高速化することで、訪問したユーザーに高いUXを提供することができます。



また、Googleで記事やトピックを検索すると、検索上部にAMPページを表示することができます。

AMPの公式ドキュメントはこちらです。
amp.dev

アプリケーションの準備

create-next-appでプロジェクトの雛形を作成していきます。

$ npx create-next-app next-amp

アプリケーションが正常に動くか確認します。localhost:3000にアクセスしてください。

$ yarn dev

f:id:kamimura-dev:20200112200427p:plain

Next.jsのAMP対応

Next.jsのAMP対応は非常に簡単で、useAmpというhookを使って実装できます。Next.jsのAMP対応には、HybridAMP-only の2種類あります。

Hybrid

Hydridでは、通常のHTMLと、AMPのHTMLの両方をレンダリングすることができます。AMP対応のページにしたい場合は、URLのパラメータに amp=1 をつけることで実現できます。

import { useAmp } from 'next/amp';

export const config = { amp: 'hybrid' };

export default function Index(props) {
  const isAmp = useAmp();
  return <p>Welcome to the {isAmp ? 'AMPページ!' : 'AMPページではない!'}</p>;
}

ここでは、amp'hybrid'valueを指定することで対応できます。そして、isAmpによって、AMP対応のページと、通常のページのレンダリングをわけています。

export const config = { amp: 'hybrid' };

AMP only

Hybridでは両方対応できましたが、AMPのみ対応することもできます。この方法では、常にAMPページが提供されます。

import { useAmp } from 'next/amp';

export const config = { amp: true };

export default function Index(props) {
  const isAmp = useAmp();
  return <p>Welcome to the {isAmp ? 'AMPページ!' : 'AMPページではない!'}</p>;
}

AMP onlyにするためには、ampvaluetrueにします。

export const config = { amp: true };

ここまで2つのAMP対応について説明しました。AMP onlyでアプリケーションを立ち上げてみます。

$ yarn dev

Welcom to the AMPページ!が表示されました。AMP対応ができています。

f:id:kamimura-dev:20200112202246p:plain

AMPのコンポーネント

AMPには多くのコンポーネントライブラリが提供されています。試しに、amp-imgを使って実装してみましょう。
amp.dev

ここではamp-imglayout=responsiveを設定することで、サイズに合わせた画像を表示します。

amp.dev

import React from 'react';
import {useAmp} from 'next/amp';

export const config = {amp: true};

const imgSrc = 'https://placekitten.com/1000/1000';

export default function Index(props) {
  const isAmp = useAmp();
  return (
    <div>
      {isAmp ? (
        <amp-img
          alt="ニャンコ"
          src={imgSrc}
          width="1000"
          height="1000"
          layout="responsive"></amp-img>
      ) : (
        <img alt="ニャンコ" src={imgSrc} width="1000" height="1000"></img>
      )}
    </div>
  );
}

ソースコードの参照
https://web.dev/how-to-use-amp-in-nextjs/

試しにChrome DevToolsで確認してみましょう。アスペクト比に沿って画像がレンダリングされています。また、AMPのコンポーネントレンダリングができてることも確認できます。

f:id:kamimura-dev:20200112203805p:plain

本番環境でのAMP

これでNext.jsのAMP対応ができました。試しにNetlifyへ静的なNext.jsアプリケーションをデプロイしてみます。Next.jsをNetlifyにデプロイする方法はこちらの記事に書かれています。
qiita.com

Netlifyの公式サイト
www.netlify.com

また、AMPのチェックができるChrome Extensionがあるので、インストールしてください。
chrome.google.com

Netlifyでデプロイしたアプリケーションを見ると、AMP対応できてることが確認できます。

f:id:kamimura-dev:20200112204755p:plain

そして、AMP Validatorでも確認することができます。
f:id:kamimura-dev:20200112204644p:plain

最後に

AMP対応することができました。特にメディアサイトを作る場合など、AMP対応する必要性がでてくるかもしれません。今後の動向を確認しつつ、適切な場面でAMP対応できればいいですね。