Next.js アプリに AMP を追加する 2 つの方法を試す
学習内容
この 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 バージョンがレンダリングされていることがわかります。
このページには <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;