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

Next.js アプリに AMP を追加する 2 つの方法をお試しください

フセイン ジルデ

この Codelab を進めるには、この Glitch を 2 つ目のタブで開きます。

学習内容

この Codelab では、Next.js アプリで AMP を使用する 2 つの方法を試すことができます。Next.js アプリに AMP サポートを追加する理由については、AMP で Next.js アプリの高速性が保証される仕組みをご覧ください。

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

注意: Next.js で AMP を使用する場合は、AMP のみのアプローチをおすすめします。このセクションで説明するハイブリッド AMP アプローチでは、各ページを 2 つのバージョンで管理する必要があるため、AMP のみアプローチよりもメンテナンス費用が高くなります。混合型のアプローチは、AMP のみを使ったアプローチではうまくいかないと確信が持てる場合のみ使用してください。

ハイブリッド AMP アプローチでは、すべての Next.js ページに付属する AMP バージョンが作成されます。これまでは、ページのメイン バージョンに AMP が対応していないエクスペリエンスがある場合に、ハイブリッド アプローチが頻繁に使用されていました。メイン バージョンではすべての機能が提供されますが、AMP ページのエクスペリエンスは若干低下しました。amp-script の導入により、ハイブリッド アプローチの必要性は下がりますが、まだ必要な場合に備えて、ここでは説明しておきます。

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

import React from 'react'

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

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

export default Home;

1. [Remix to Edit] をクリックしてプロジェクトを編集可能にします。

2. サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。

3. URL の末尾に ?amp=1 を追加します。ページの外観は同じですが、コンソールを見ると、ページの AMP バージョンがレンダリングされていることがわかります。

このページには <p> タグが 1 つしかないため、メインページと AMP バージョンの間に目に見える違いはありません。

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

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

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

2. 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;
   

3. ページのメイン バージョンを読み込みます。

   

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

   

5. 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 をご覧ください。

6. ページのメイン バージョンを再度表示します。

   

7. ページの AMP バージョンをもう一度表示します。

   

AMP のみのページの作成方法

Next.js は AMP のみのページにも対応しています。この方法では、ユーザーと検索エンジンに常に 1 つの AMP ページが表示され、レンダリングされます。

1. 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;