如何在 Next.js 中使用 AMP

請試試將 AMP 新增至 Next.js 應用程式的兩種方法。

Houssein Djirdeh

如要按照本程式碼研究室的說明操作，請在第二個分頁中開啟這個 Glitch。

您會學到什麼？

本程式碼研究室可讓您嘗試兩種方法，可在 Next.js 應用程式中使用 AMP。請參閱如何在 Next.js 應用程式中確保 AMP 的運作速度，瞭解您可能會在 Next.js 應用程式中新增 AMP 支援的原因。

如何建立混合式 AMP 網頁

注意： 如要搭配 Next.js 使用 AMP，建議採用僅限 AMP 做法。本節說明的混合式 AMP 方法的維護成本比僅適用於 AMP 的做法高，因為您必須維護每個網頁的兩個版本。除非您確定僅限 AMP 方法無法運作，否則我們不建議使用混合型方法。

混合式 AMP 方法可用來為所有 Next.js 網頁建立隨附的 AMP 版本。過去，當主要版本網頁中有 AMP 無法支援的體驗時，就經常採用混合式方法。主要版本擁有完整體驗，而 AMP 網頁的使用體驗會稍微降級。隨著 amp-script 的問世，您已不太需要採用混合式方法，但現在我們會提供完整說明，以防您仍需使用這項技術。

您可以透過多種方式設定 Next.js 轉譯及提供頁面的方式。只要使用 config 物件，即可逐頁修改這些項目。如要提供特定網頁做為 AMP 網頁，您需要匯出物件中的 amp 屬性：

import React from 'react'

export const config = { amp: 'hybrid' };

const Home = () => (
  <p>This is the home page</p>
);

export default Home;

1. 按一下「Remix to Edit」，讓專案可供編輯。

2. 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 。

3. 在網址結尾加上 ?amp=1。網頁看起來一樣，但您在查看主控台時，會發現系統轉譯了該網頁的 AMP 版本。

網頁只有單一 <p> 標記，因此主要網頁與對應的 AMP 版本沒有明顯差別。

如何有條件提供 AMP 元件

AMP 網頁需要有一組有效的元件來取代許多 HTML 元素，請務必確保 AMP 元件只針對 AMP 網頁提供特定條件。 Next.js 提供名為 useAmp 的掛鉤，可讓您根據要求的頁面版本，有條件地提供不同的元素。

1. 如要查看原始碼，請按下「檢視原始碼」。

2. 編輯 pages/index.js，讓系統根據所要求的主要版本或 AMP 版本，在頁面中算繪不同的段落元素：

   import React from 'react';
   import { useAmp } from 'next/amp';
   
   export const config = { amp: 'hybrid' };
   
   const Home = () => (
     useAmp() ? (
       <p>This is the <strong>AMP</strong> version of the home page</p>
     ) : (
       <p>This is the main version of the home page</p>
     )
   );
   
   export default Home;
   

3. 載入網頁的主要版本：

   

4. 再次在網址結尾加上 ?amp=1，即可載入網頁的 AMP 版本：

   

5. 請嘗試轉譯以 AMP 取代的圖片標記 amp-img：

   import React from 'react';
   import { useAmp } from 'next/amp';
   
   export const config = { amp: 'hybrid' };
   
   const imgSrc = 'https://placekitten.com/1000/1000';
   
   const Image = () => (
     useAmp() ? (
       <amp-img alt="A cute kitten"
         src={imgSrc}
         width="1000"
         height="1000"
         layout="responsive">
       </amp-img>
     ) : (
       <img alt="A cute kitten"
         src={imgSrc}
         width="1000"
         height="1000">
       </img>
     )
   );
   
   const Home = () => (
     <div>
       <Image />
     </div>
   );
   
   export default Home;
   

   layout="responsive" 會自動轉譯完全回應式的圖片，其顯示比例由寬度和高度指定。請參閱「版面配置和媒體查詢」，進一步瞭解支援的 AMP 元素版面配置；請參閱 amp-img，進一步瞭解該元素的最佳化作業。

6. 再次查看網頁的主要版本。

   

7. 再次查看 AMP 版本的網頁。

   

如何建立僅限 AMP 的網頁

Next.js 也支援僅限 AMP 網頁。透過這種方法，使用者和搜尋引擎都能隨時提供及轉譯單一 AMP 網頁。

1. 如要轉譯僅限 AMP 的網頁，請將 config 物件中的 amp 屬性值變更為 true。

   import React from 'react'
   
   export const config = { amp: true };
   
   const Home = () => (
     <p>This is an AMP-only page</p>
   );
   
   export default Home;