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対応には、HybridとAMP-only の２種類あります。

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にするためには、ampのvalueをtrueにします。

export const config = { amp: true };

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

$ yarn dev

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

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

AMPのコンポーネント

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

ここではamp-imgのlayout=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>
  );
}