Next.js アプリに AMP を追加する 2 つの方法をお試しください
学習内容
この Codelab では、Next.js アプリで AMP を使用する 2 つの方法を試すことができます。Next.js アプリに AMP サポートを追加する理由については、AMP で Next.js アプリの高速性が保証される仕組みをご覧ください。
ハイブリッド 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;
[Remix to Edit] をクリックしてプロジェクトを編集可能にします。
サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。
URL の末尾に
?amp=1
を追加します。ページの外観は同じですが、コンソールを見ると、ページの AMP バージョンがレンダリングされていることがわかります。
このページには <p>
タグが 1 つしかないため、メインページと AMP バージョンの間に目に見える違いはありません。
AMP コンポーネントを条件付きで配信する方法
AMP ページには、多くの HTML 要素の代わりに、独自の有効なコンポーネント セットが必要です。AMP コンポーネントが、条件付きで AMP ページに対してのみ配信されることを確認することが重要です。Next.js には useAmp
というフックが用意されており、リクエストされたページのバージョンに応じて条件付きでさまざまな要素を配信できます。
ソースを表示するには、[ソースを表示] を押します。
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;