DocsDigest
一覧へLanguage: EN
OpenAINext.js2019/04/16 21:41

Next.js 8.1

要点だけを先に読めるように短く再構成したセクションです。

元記事
OpenAIClaude

Quick Digest

要約

要点だけを先に読めるように短く再構成したセクションです。

openaijamodel: gpt-5-mini-2025-08-07

Next.js 8.1：AMPサポートの追加

next.jsampreactwithampuseampvalidation

Key Points

  • AMP対応ページ
  • ハイブリッド対応
  • 自動AMP検証

Summary

Next.js 8.1 で AMP ページの作成が公式にサポートされました。ページ単位で AMP を有効化でき、React コンポーネントを使って AMP 表示と通常表示を共存させられます。ハイブリッド（通常ページ＋AMP版）と AMP-first（サイトの主要トラフィックに AMP を提供）の2つの導入パターンが提供されます。

Key Points

  • 有効化方法
    • ハイブリッド：import { withAmp } from 'next/amp' と export default withAmp(Page, { hybrid: true }) を使用。
    • AMP-first：export default withAmp(Page) を使用（AMP 互換コンポーネントのみで構築）。
  • コンポーネント内での判別
    • useAmp() を利用して AMP/非AMP を判別し、amp-img と img などを切り替える実装が可能。
  • 開発時の挙動
    • HMR ではなくページのフルリロードを行い、常に最新のサーバーサイドレンダーを確認できる。
  • 検証とビルド
    • amphtml-validator による自動検証が開発時・next export 時に行われる。AMP エラーはターミナルに出力され、next export は失敗する。
  • 導入例と資料
    • 公式ドキュメントと npx create-next-app --example amp amp-app から開始可能。

Full Translation

翻訳

原文の流れを保ったまま読める翻訳セクションです。

openaijamodel: gpt-5-mini-2025-08-07

Next.js 8.1

ブログに戻る
2019-04-16 (火)

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

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

AMP とは

AMP はレンダリングのオーバーヘッドを最小化し、高速な Web サイトを構築するための規格です。AMP ページは主要な検索エンジンで強化された挙動でインデックスされ、例えば Google のモバイル検索結果に直接読み込まれて稲妻アイコンで示されます。
（例: Next.js の Google 検索結果）

AMP HTML は通常の HTML よりも厳格な仕様で、より確実なパフォーマンスとスケーラビリティを実現するためにいくつかの制約を課します。いくつかの HTML タグは AMP 固有のタグに置き換えられ、対応する HTML タグより良い振る舞いを提供します。例えば amp-img タグは、まだブラウザが srcset をサポートしていない場合でも完全な srcset サポートを提供します。

AMP ページは AMP をサポートする検索エンジンによって自動的に検出されます。これらの検索エンジンは一般に AMP Cache（例: Google や Bing）を実装しており、AMP Cache によって検索結果からページをより速くレンダリングできます。

Next.js における AMP

Next.js ではページ単位で AMP サポートを定義できるようになり、React コンポーネントの力を使って AMP ページを作成できるようになりました。AMP はインクリメンタルに採用できます。Next.js で AMP を有効にする方法は 2 種類あります: Hybrid AMP ページ と AMP-first ページです。

Hybrid AMP ページ

Hybrid AMP ページを使うと、従来のページに対応する AMP バージョンを持つことができ、検索エンジンはモバイル検索結果で AMP バージョンを表示しつつ、既存の（フル）ページも維持できます。これにより、アプリケーションに AMP を導入しつつ、メインのユーザー体験では Next.js のクライアントサイドルーティングなどの機能を活用できます。

Hybrid AMP ページを有効にするには withAmp 関数を使い、hybrid: true オプションを渡します。

pages/index.js

function HomePage () {
  return <p>Welcome to AMP + Next.js.</p>;
}

export default withAmp(HomePage, { hybrid: true });

実運用で Hybrid AMP パターンが使われている例として Reddit があります。各スレッドは Google の AMP Cache に保存されており、モバイル Web 全体で高速なユーザー体験を提供しつつ、デスクトップやその後のナビゲーションでは Reddit のフルバージョンを提供しています。

（画像: Reddit が AMP を使って SEO を改善している例、AMP ビューアでの Reddit の画像）

AMP-first ページ

AMP-first ページは、サイトの主要なトラフィックおよび検索エンジンのトラフィックに対して配信されます。AMP-first を採用すると、デスクトップを含むメインサイトに 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 });

開発時の自動リロード

開発環境では、hot-module-replacement の代わりに現在見ているページの変更を追跡し、そのページが変更されたときのみページ全体をリロードします。フルリロードを使う理由は、常に AMP ページの最新のサーバーサイドレンダーを表示することを保証するためです。

AMP バリデーション

開発中に有効な AMP ページだけが出力されるよう、amphtml-validator で自動的に検証します。エラーや警告は Next.js を起動したターミナルに表示されます。ページは next export 実行時にも検証され、問題があればターミナルに出力されます。AMP のエラーがあると next export は失敗します（エクスポートされた出力が有効な AMP ではないため）。

Next.js で AMP を学ぶ

Next.js の使い方に加えて、Next.js で AMP を使う方法をまとめた新しいセクションを追加しました: Learn to use AMP with Next.js

または AMP の例から始めるには以下を実行してください:

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