Next.js 8.1

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

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

AMP とは？...(SVGの翻訳は省略)

AMP は、レンダリングのオーバーヘッドを最小限に抑え、有名な検索エンジンで強化された動作でインデックスを作成できる、高パフォーマンスのウェブサイトを構築するための標準です。たとえば、AMP ページは Google のモバイル検索結果に直接読み込まれ、稲妻アイコンでマークされます。

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

AMP ページは、それをサポートする検索エンジンによって自動的に検出されます。これらの検索エンジンは、一般的に AMP キャッシュ...(SVGの翻訳は省略) (例：Google...(SVGの翻訳は省略) および Bing...(SVGの翻訳は省略)) を実装しています。AMP キャッシュは、検索結果からページをより速くレンダリングするのに役立ちます。

Next.js における AMP...(SVGの翻訳は省略)

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

ハイブリッド AMP ページ...(SVGの翻訳は省略)

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

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

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

本番環境で使用されているハイブリッドAMPパターンの例として、Redditがあります。各スレッドは、モバイルウェブ全体で高速なユーザーエクスペリエンスを提供しながら、デスクトップと後続のナビゲーションのためにRedditのフルバージョンを提供するために、GoogleのAMPキャッシュに保存されます。

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