瞭解在 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 的方法有兩種：
- 混合式 AMP 方法可讓您為任何 Next.js 網頁建立隨附的 AMP 版本。
- 僅限 AMP 做法可讓您讓 AMP 網頁成為網頁的唯一選項。
雖然 Next.js 通常會被認為是 React 架構，但您必須瞭解，使用 Next.js 提供 AMP 網頁時，由於 React 元件不是有效的 AMP 元件，因此您無法在用戶端執行 React 元件。換句話說，Next.js 不再是 React 架構，而是用於產生 AMP 網頁的伺服器端範本引擎。
如何決定採用混合型 AMP 或僅限 AMP 的方法
如果您認為載入效能十分重要，只適合使用 AMP 的網頁即可確保網頁載入速度飛快且能維持快速運作。但重點如下：為確保速度，AMP 禁止特定架構模式和經常導致網頁緩慢的 HTML 元素。舉例來說，轉譯封鎖資源是頁面載入速度緩慢的常見原因，因此 AMP 不允許自訂同步 JavaScript。
如要瞭解僅限 AMP 做法是否適合您，您必須確認所有前端程式碼是否可用 AMP HTML 表示：
- 請參閱 AMP 運作方式，瞭解 AMP 的概要架構限制和必要的最佳化作業。
- 請詳閱 HTML 標記，瞭解 AMP 允許和禁止的 HTML 標記，瀏覽 AMP 元件目錄，查看 AMP 社群為瞭解決常見用途而建立的自訂元件，以及查看 amp-script，瞭解如何使用自訂 JavaScript 實作 AMP 目前不支援的功能。
即使只有 AMP 網頁的做法不適合您的網頁，可能還是建議您盡可能使用 AMP，因為 AMP HTML 和 AMP 快取的快速良好速度仍是不錯的做法。 Next.js 中的混合式 AMP 方法可讓您有條件地提供 AMP 網頁。不過，前者需要維護兩個版本，因此維護成本也比較高。
結語
AMP 會強制執行可加快速度並禁止拖慢網站模式，確保網站速度飛快且速度飛快。AMP HTML 和 AMP 快取是 AMP 保證快速運作的兩種主要方式。不過，在採用 AMP 之前，請確保其支援網站的所有需求。