Next.js 8.1

本日、Next.jsでAMPページを作成できるようになったことをお知らせできることを嬉しく思います。

• AMPとは
• Next.jsにおけるAMP
• ハイブリッドAMPページ
• AMPファーストページ
• AMP検証

AMPとは？

AMPは、レンダリングのオーバーヘッドを最小限に抑え、よく知られた検索エンジンで強化された動作とともにインデックス登録できる、高性能なウェブサイトを構築するための標準です。例えば、AMPページは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を有効にする方法は、ハイブリッドAMPページとAMPファーストページの2つです。

ハイブリッドAMPページ

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

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

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

ハイブリッドAMPパターンの実稼働での使用例の1つはRedditです。各スレッドは、モバイルウェブ全体で高速なユーザーエクスペリエンスを提供するためにGoogleのAMPキャッシュに保存され、デスクトップおよびその後のナビゲーションのためにRedditのフルバージョンも提供されます。

AMPファーストページ

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

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

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>コンポーネントを実装できます。

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} />
  );
}

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 });

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

開発中、ホットモジュールリプレイスメントを使用する代わりに、現在表示しているページへの変更を追跡し、変更があった場合にのみページをリロードします。ホットモジュールリプレイスメントではなく完全なリロードを使用する理由は、常にAMPページの新鮮なサーバーサイドレンダリングを確認できるようにするためです。

AMP検証

有効なAMPページのみが生成されるように、開発中にamphtml-validatorで自動的に検証します。エラーと警告は、Next.jsを起動したターミナルに表示されます。

ページはnext export中にも検証され、問題があればターミナルに出力されます。AMPエラーは、エクスポートが有効なAMPではないため、next exportを失敗させます。

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

Next.jsの使用方法を学ぶことに加えて、Next.jsでAMPを使用する方法を学ぶための新しいセクションを追加しました。

または、AMPの例を使用して開始することもできます。

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