瞭解在 Next.js 應用程式中支援 AMP 的好處和取捨
AMP 是一種網頁元件架構，可確保網頁快速載入。Next.js 內建 AMP 支援功能。
您會學到哪些內容？
本指南首先簡要說明 AMP 如何確保快速的網頁載入速度，接著說明在 Next.js 應用程式中支援 AMP 的不同方式，最後協助您決定最適合自己的做法。
本指南的目標對象是已決定使用 Next.js，但不確定是否要支援 AMP 的網頁開發人員。
AMP 如何保證快速的網頁載入速度
AMP 有兩種主要策略可確保速度：
- AMP HTML：一種受限的 HTML 格式，會強制執行特定最佳化作業，並禁止導致速度緩慢的架構模式。如要概略瞭解最佳化和限制，請參閱「AMP 的運作方式」。
- AMP 快取：部分搜尋引擎 (例如 Google 和 Bing) 使用的內容快取，會使用預先轉譯技術加快網頁載入速度。請參閱「AMP 快取的用途」，進一步瞭解快取的優點和取捨，以及「AMP 網頁如何進入快取？」，瞭解 AMP 網頁如何進入快取。
如何在 Next.js 中使用 AMP
在 Next.js 中使用 AMP 的方法有兩種：
- Hybrid AMP 方法可讓您為任何 Next.js 頁面建立隨附的 AMP 版本。
- 僅限 AMP 方法可讓您將 AMP 設為網頁的唯一選項。
雖然 Next.js 通常被視為 React 架構，但請務必瞭解，如果您使用 Next.js 提供 AMP 網頁，就無法再在用戶端執行 React 元件，因為 React 元件不是有效的 AMP 元件。換句話說，Next.js 不再是 React 架構，而是用於產生 AMP 網頁的伺服器端範本引擎。
如何決定要使用混合 AMP 還是 AMP-only 方法
如果您非常重視載入效能，使用 AMP 專用網頁是確保網頁快速載入並維持快速載入速度的好方法。但問題是：為了確保速度，AMP 禁止使用某些經常導致網頁速度變慢的架構模式和 HTML 元素。舉例來說，AMP 不允許使用自訂同步 JavaScript，因為轉譯阻斷資源是導致網頁載入速度緩慢的常見原因。
如要瞭解是否適合採用 AMP 專用做法，您必須判斷所有前端程式碼是否可在 AMP HTML 中呈現：
- 請參閱「AMP 的運作方式」，瞭解 AMP 的高層級架構限制和強制最佳化方式。
- 請參閱「HTML 標記」，瞭解 AMP 允許和禁止的 HTML 標記；瀏覽 AMP 元件目錄，查看 AMP 社群為解決常見用途而建構的自訂元件；並查看 amp-script，瞭解如何使用自訂 JavaScript 實作 AMP 目前不支援的功能。
即使 AMP 專用方法不適用於您的網頁，還是建議您盡可能使用 AMP，因為 AMP HTML 和 AMP Cache 的速度都相當快。Next.js 中的 Hybrid AMP 方法可讓您依條件放送 AMP 網頁。不過，這也會造成較高的維護成本，因為您必須維護每個網頁的兩個版本。
結論
AMP 會強制執行可加快網站速度的模式，並禁止會導致網站速度變慢的模式，確保網站速度快速且持久。AMP HTML 和 AMP 快取是 AMP 保證速度快的兩大主要方式。不過，在採用 AMP 之前，請先確認 AMP 能支援網站的所有需求。