如何在 Next.js 中使用 AMP

請嘗試透過兩種方法將 AMP 新增至 Next.js 應用程式

Houssein Djirdeh

如要遵循本程式碼研究室，請在第二個分頁中開啟此 Glitch。

您會學到什麼？

本程式碼研究室可讓您試用在 Next.js 應用程式中使用 AMP 的兩種方式。 查看 AMP 如何在 Next.js 應用程式中保證網頁速度，瞭解為什麼 可以為您的 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;