useAmp
例
AMPサポートは高度な機能の1つであり、AMPの詳細はこちらで読むことができます。
AMPを有効にするには、ページに次の設定を追加します:
pages/index.js
export const config = { amp: true }
amp
設定は以下の値を受け入れます:
true
- ページはAMP専用になります'hybrid'
- ページはAMPとHTMLの2つのバージョンを持ちます
amp
設定の詳細については、以下のセクションをお読みください。
AMP専用ページ
次の例を見てみましょう:
pages/about.js
export const config = { amp: true }
function About(props) {
return <h3>My AMP About Page!</h3>
}
export default About
上記のページはAMP専用ページであり、以下を意味します:
- ページにはNext.jsやReactのクライアントサイドランタイムがありません
- ページはAMP Optimizerで自動的に最適化されます。これはAMPキャッシュと同じ変換を適用するオプティマイザーです(最大42%のパフォーマンス改善)
- ページにはユーザーがアクセス可能な(最適化された)バージョンと、検索エンジンでインデックス可能な(最適化されていない)バージョンがあります
ハイブリッドAMPページ
次の例を見てみましょう:
pages/about.js
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
を使用してモードを区別します。これは、ページがAMPを使用している場合はtrue
を、そうでない場合はfalse
を返すReactフックです。