useAmp
範例
AMP 支援是我們的高級功能之一，您可以在此閱讀更多關於 AMP 的資訊。
要啟用 AMP，請在您的頁面中加入以下配置：
export const config = { amp: true }amp 配置接受以下值：
true- 該頁面將僅為 AMP 版本'hybrid'- 該頁面將有兩個版本，一個是 AMP 版本，另一個是 HTML 版本
要了解更多關於 amp 配置的資訊，請閱讀以下章節。
AMP 專用頁面
請看以下範例：
export const config = { amp: true }
function About(props) {
return <h3>我的 AMP 關於頁面！</h3>
}
export default About上述頁面是一個僅限 AMP 的頁面，這意味著：
- 該頁面沒有 Next.js 或 React 的客戶端運行時
- 該頁面會自動透過 AMP Optimizer 進行優化，這個優化工具會應用與 AMP 快取相同的轉換（可將效能提升高達 42%）
- 該頁面有一個使用者可訪問的（優化後）版本和一個搜索引擎可索引的（未優化）版本
混合 AMP 頁面
請看以下範例：
import { useAmp } from 'next/amp'
export const config = { amp: 'hybrid' }
function About(props) {
const isAmp = useAmp()
return (
<div>
<h3>我的 AMP 關於頁面！</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。