このページは Cloud Translation API によって翻訳されました。

Next.js で AMP を使用する方法

Next.js アプリに AMP を追加する 2 つの方法を試す

Houssein Djirdeh

学習内容

この Codelab では、Next.js アプリで AMP を使用する 2 つの方法を試すことができます。 AMP が Next.js アプリの速度を保証する仕組みをご覧になり、 Next.js アプリに AMP サポートを追加することをおすすめします。

ハイブリッド AMP ページの作成方法

ハイブリッド AMP アプローチでは、Next.js ページの付随する AMP バージョンが作成されます。過去ハイブリッドアプローチは、メインバージョンでエクスペリエンスがある場合に、 AMP でサポートできなかったページです。メインバージョンがフルバージョンだったのに対し、AMP ページはエクスペリエンスが若干低下しますamp-script の導入により、説明しましたが、まだ必要な場合に備えてここで取り上げます。

Next.js によるページのレンダリングと提供の方法を設定するには、複数の方法があります。config の使用オブジェクトを使用すると、ページ単位でこれらを変更できます。特定のページをオブジェクトの amp プロパティをエクスポートする必要があります。

import React from 'react'

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

const Home = () => (
  <p>This is the home page</p>
);

export default Home;

[Remix to Edit] をクリックして、プロジェクトを編集可能にします。
サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 。
URL の末尾に ?amp=1 を追加します。ページは同じに見えますが、コンソールに、ページの AMP バージョンがレンダリングされていることがわかります。

ライブページと、このページが AMP を使用していることを示す Chrome DevTools コンソールのメッセージ。

このページには <p> タグが 1 つしかないため、表示されます。

AMP コンポーネントを条件付きで配信する方法

AMP ページでは、多くの HTML 要素の代わりに、固有の有効なコンポーネントセットを用意する必要があります。です。 AMP コンポーネントが、AMP ページに対してのみ条件付きで配信されるようにします。 Next.js には、さまざまな要素を条件付きで配信できる useAmp というフックが用意されています。リクエストのあったページのバージョンによって異なります

ソースを表示するには、[View Source] を押します。

pages/index.js を編集して、リクエストの対象となったバージョン（メインバージョンまたは AMP バージョン）を示します。

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

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

const Home = () => (
  useAmp() ? (
    <p>This is the <strong>AMP</strong> version of the home page</p>
  ) : (
    <p>This is the main version of the home page</p>
  )
);

export default Home;

ページのメインバージョンを読み込みます。
URL の末尾にもう一度 ?amp=1 を追加して、ページの AMP バージョンを読み込みます。

AMP で置き換えられたイメージタグ amp-img をレンダリングしてみます。

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

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

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

const Image = () => (
  useAmp() ? (
    <amp-img alt="A cute kitten"
      src={imgSrc}
      width="1000"
      height="1000"
      layout="responsive">
    </amp-img>
  ) : (
    <img alt="A cute kitten"
      src={imgSrc}
      width="1000"
      height="1000">
    </img>
  )
);

const Home = () => (
  <div>
    <Image />
  </div>
);

export default Home;

layout="responsive" は、アスペクト比を指定して完全にレスポンシブな画像を自動的にレンダリングします指定します。詳しくは、レイアウトとメディアクエリを参照し、 AMP 要素のサポート対象レイアウトをご確認ください。また、その要素の詳しい内容については、amp-img をご覧ください。役立ちます

ページのメインバージョンをもう一度表示します。
ページの AMP バージョンを再度表示します。

AMP 専用ページを作成する方法

Next.js は AMP 専用ページもサポートしています。この方法では、1 つの AMP ページが配信されてレンダリングされます。ユーザーと検索エンジンに常に公開できます。

AMP 専用ページをレンダリングするには、config オブジェクトの amp プロパティの値を true に変更します。

import React from 'react'

export const config = { amp: true };

const Home = () => (
  <p>This is an AMP-only page</p>
);

export default Home;