瞭解在 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 之前，應先確保這類網頁支援網站的所有需求。