Next.js 8.1

投稿者: Connor Davis @ connordav_is, JJ Kasper @ _ijjk, Joe Haddad @ timer150, Luis Alvarez @ luis_fades, Tim Neutkens @ timneutkens

本日、Next.jsでAMPページを作成できるよう、Next.jsの体験を拡張したことを発表いたします。

目次

• AMPとは
• Next.jsでのAMP
• ハイブリッドAMPページ
• AMP-firstページ
• AMPバリデーション

AMPとは？

AMPは、レンダリングのオーバーヘッドを最小化し、拡張された動作で有名な検索エンジンにインデックスされる高性能なWebサイトを構築するための標準です。例えば、AMPページはGoogleのモバイル検索結果に直接読み込まれ、稲妻アイコンでマークされます。

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

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

Next.jsでのAMP

本日、Next.jsでAMPページを作成できるよう、Next.jsの体験を拡張したことを発表いたします。これは、Reactコンポーネントの力を活用してAMPページを作成できることを意味します。

AMPサポートはページ単位で定義され、AMPの段階的な採用が可能です。Next.jsでAMPを有効にする方法は2つあります：ハイブリッドAMPページまたはAMP-firstページです。

ハイブリッド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パターンが使用されている例の1つはRedditです。各スレッドはGoogleのAMPキャッシュに保存され、モバイルWeb全体で高速なユーザー体験を提供する一方で、デスクトップと後続のナビゲーションには完全版のRedditを提供しています。

AMP-Firstページ

AMP-firstページは、検索エンジンのトラフィックだけでなく、Webサイトの主要なトラフィックにも提供されます。AMP-firstページを使用することで、デスクトップを含むメインWebサイトにAMPの高速な体験をもたらします。

AMP-firstページを実装するには、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-firstページを使用することで開発を高速化できます。AMP-Firstでは、ページを構築するためにAMP互換コンポーネントのみを使用する必要があります。

AMP-Firstページは現在、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 });

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

開発時には、hot-module-replacementを使用する代わりに、現在表示しているページへの変更を追跡し、変更があった場合にのみページをリロードします。hot-module-replacementの代わりに完全なリロードを使用する理由は、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