🚀
【Next.js和訳】API Reference/ next/amp
この記事について
この記事は、next/ampの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
next/amp
Examples
AMP を有効にするには、ページに以下の config を追加します。
export const config = { amp: true }
amp
config は以下の値を受け付けます。
-
true
- ページは、AMP のみになります。 -
hybrid
- ページは、AMP と HTML の 2 つのバージョンを持ちます。
amp
config の詳細については、以下のセクションをお読みください。
AMP ファーストページ
次の例を見てみましょう。
export const config = { amp: true }
function About(props) {
return <h3>My AMP About Page!</h3>
}
export default About
上のページは AMP 専用ページ、ということになります。
- このページには Next.js や React のクライアントサイドランタイムはありません。
- AMP キャッシュと同じ変換を施すオプティマイザーAMP Optimizerで自動的に最適化されたページ(パフォーマンスが最大 42%向上します
- ページには、ユーザーがアクセス可能な(最適化された)バージョンのページと、検索エンジンがインデックス可能な(最適化されていない)バージョンのページがあります。
ハイブリッド AMP ページ
次の例を見てみましょう。
import { useAmp } from "next/amp"
export const config = { amp: "hybrid" }
function About(props) {
const isAmp = useAmp()
return (
<div>
<h3>My AMP About Page!</h3>
{isAmp ? (
<amp-img
width="300"
height="300"
src="/my-img.jpg"
alt="a cool image"
layout="responsive"
/>
) : (
<img width="300" height="300" src="/my-img.jpg" alt="a cool image" />
)}
</div>
)
}
export default About
上のページはハイブリッド AMP ページで、つまり。
- このページは、従来の HTML(デフォルト)と AMP HTML(URL に
?amp=1
を追加)でレンダリングされています。 - AMP 版のページは、AMP Optimizer で有効な最適化を施し、検索エンジンにインデックスされるようにしています。
- このページでは、モードを区別するために
useAmp
を使用しています。これは React Hook で、ページが AMP を使用している場合はtrue
を、そうでない場合はfalse
を返します。
Discussion