Next.js 8.1

本日、Next.jsのエクスペリエンスをAMPページの作成にも拡張したことを発表できることを嬉しく思います。

AMPとは
Next.jsにおけるAMP
ハイブリッドAMPページ
AMPファーストページ
AMPバリデーション

AMPとは？

AMP（Accelerated Mobile Pages）は、レンダリングのオーバーヘッドを最小限に抑え、検索エンジンでのインデックス化と拡張機能を可能にする高性能ウェブサイト構築の標準規格です。例えば、AMPページはGoogleのモバイル検索結果に直接読み込まれ、稲妻アイコンでマークされます。

Next.jsのGoogle検索結果

AMP HTMLはHTMLのより厳格なバージョンで、信頼性の高いパフォーマンスとスケーラビリティを実現するためにいくつかの制限を課しています。一部のHTMLタグは、対応するHTMLタグよりも優れたエクスペリエンスを提供するためにAMP固有のHTMLタグに置き換えられています。例えば、amp-imgタグは、srcsetをまだサポートしていないブラウザでも完全なサポートを提供します。

AMPページは、それをサポートする検索エンジンによって自動的に発見されます。これらの検索エンジンは一般的にAMPキャッシュ（例：GoogleやBing）を実装しています。AMPキャッシュは、検索結果からページをより速く表示するのに役立ちます。

Next.jsにおけるAMP

本日、Next.jsのエクスペリエンスをAMPページの作成にも拡張したことを発表します。これにより、Reactコンポーネントの力を活用してAMPページを作成できるようになりました。AMPサポートはページ単位で定義されるため、AMPを段階的に導入できます。Next.jsでAMPを有効にする方法は2つあります：ハイブリッドAMPページとAMPファーストページです。

ハイブリッドAMPページ

ハイブリッドAMPページでは、従来のページにAMPバージョンを併せ持つことができ、検索エンジンはモバイル検索結果にAMPバージョンのページを表示しながら、既存のバージョンのページを維持できます。これにより、メインのユーザーエクスペリエンスにはNext.jsのクライアントサイドルーティングなどの機能を利用しつつ、アプリケーションにAMPを取り入れることが可能になります。

ハイブリッドAMPページを有効にするには、hybrid: trueオプションを指定してwithAmp関数を使用します：

pages/index.js

function HomePage() {
  return <p>Welcome to AMP + Next.js.</p>;
}
 
export default withAmp(HomePage, { hybrid: true });

ハイブリッドAMPパターンを実際に使用している例としてRedditがあります。各スレッドはGoogleのAMPキャッシュに保存され、モバイルウェブ全体で高速なユーザーエクスペリエンスを提供すると同時に、デスクトップやその後のナビゲーションにはRedditの完全版を提供しています。

SEO向上のためにAMPを使用するRedditの画像

AMPビューアーでのRedditの画像

AMPファーストページ

AMPファーストページは、ウェブサイトの主要なトラフィックと検索エンジンのトラフィックの両方に提供されます。AMPファーストページを使用することで、デスクトップを含むメインのウェブサイトにAMPの高速なエクスペリエンスをもたらします。

AMPファーストページを実装するには、ページをwithAmp関数でラップします：

pages/index.js

import { withAmp } from 'next/amp';
function HomePage() {
  return <p>Welcome to AMP + Next.js.</p>;
}
 
export default withAmp(HomePage);

Next.jsランタイムが必要ない場合、AMPファーストページを使用することで開発をスピードアップできます。AMPファーストでは、AMP互換のコンポーネントのみを使用してページを構築する必要があります。AMPファーストページは現在、nextjs.org/docsとnextjs.org/blogで本番環境で使用されています。

コンポーネントでのAMPレンダリングの区別

プロジェクト内の任意のReactコンポーネントでuseAmpを使用して、AMPと非AMPのレンダリングモードを区別できます。これにより、<img>と<amp-img>の間でロジックを共有する<Image>コンポーネントを実装できます：

components/image.js

import { useAmp } from 'next/amp';
 
export function Image({ src, width, height }) {
  const isAmp = useAmp();
  return isAmp ? (
    <amp-img src={src} width={width} height={height} />
  ) : (
    <img src={src} width={width} height={height} />
  );
}

pages/index.js

import { withAmp } from 'next/amp';
import { Image } from '../components/image';
 
function HomePage() {
  return (
    <>
      <p>Hello! Welcome to AMP + Next.js.</p>
      <Image src="https://placehold.it/120" width="120" height="120" />
    </>
  );
}
 
export default withAmp(HomePage, { hybrid: true });

npx create-next-app --example amp amp-app

AMPとは？

Next.jsにおけるAMP

ハイブリッドAMPページ

AMPファーストページ

コンポーネントでのAMPレンダリングの区別

AMP開発のための自動リロード

AMPバリデーション

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