跳至內容
API 參考函式useAmp

useAmp (使用 AMP)

範例

AMP 支援是我們的進階功能之一，您可以在這裡閱讀更多關於 AMP 的資訊。

要啟用 AMP，請將以下設定新增到您的頁面

pages/index.js
export const config = { amp: true }

amp 設定接受以下值

  • true - 頁面將僅限 AMP
  • 'hybrid' - 頁面將有兩個版本，一個是 AMP，另一個是 HTML

要深入了解 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（透過在網址中新增 ?amp=1）呈現
  • 該頁面的 AMP 版本僅套用 AMP Optimizer 的有效優化，以便搜尋引擎可以索引

該頁面使用 useAmp 來區分模式，它是一個 React Hook，如果頁面使用 AMP，則返回 true，否則返回 false。