Next.js 8.1

今天，我們很興奮地宣布已將 Next.js 的開發體驗延伸至 AMP 頁面的創作。

• 什麼是 AMP
• Next.js 中的 AMP
• 混合式 AMP 頁面
• AMP 優先頁面
• AMP 驗證

什麼是 AMP？

AMP 是一個建立高效能網站的標準，它能最小化渲染開銷，並可在支援的搜尋引擎中以增強行為被索引。例如，AMP 頁面會直接載入 Google 的行動搜尋結果中，並以閃電圖示標記。

Next.js Google 搜尋結果

AMP HTML 是 HTML 的更嚴格版本，施加了一些限制以實現更可靠的效能和更好的擴展性。某些 HTML 標籤被替換為 AMP 專用的 HTML 標籤，以提供比對應 HTML 標籤更好的體驗。例如，amp-img 標籤即使在尚未支援的瀏覽器中也能提供完整的 srcset 支援。

支援的搜尋引擎會自動發現 AMP 頁面。這些搜尋引擎通常會實作 AMP 快取（例如 Google 和 Bing）。AMP 快取有助於從搜尋結果中更快地渲染頁面。

Next.js 中的 AMP

今天，我們很興奮地宣布已將 Next.js 的開發體驗延伸至 AMP 頁面的創作。這意味著您現在可以利用 React 元件的力量來建立 AMP 頁面。AMP 支援是按頁面定義的，允許逐步採用 AMP。在 Next.js 中有兩種啟用 AMP 的方式：混合式 AMP 頁面或 AMP 優先頁面。

混合式 AMP 頁面

混合式 AMP 頁面允許您擁有傳統頁面的配套 AMP 版本，以便搜尋引擎可以在行動搜尋結果中顯示頁面的 AMP 版本，同時保留頁面的現有版本。這使您可以在應用程式中使用 AMP，同時仍能利用 Next.js 的功能（如客戶端路由）來提供主要的用戶體驗。

要選擇混合式 AMP 頁面，請使用 withAmp 函數並提供 hybrid: true 選項：

function HomePage() {
  return <p>Welcome to AMP + Next.js.</p>;
}
 
export default withAmp(HomePage, { hybrid: true });

Reddit 是混合式 AMP 模式在生產環境中使用的一個例子。每個線程都儲存在 Google 的 AMP 快取中，以在行動網頁上提供快速的用戶體驗，同時仍為桌面和後續導航提供完整版本的 Reddit。

Reddit 使用 AMP 提升 SEO 的圖片

AMP 檢視器中的 Reddit 圖片

AMP 優先頁面

AMP 優先頁面會同時提供給網站的主要流量和搜尋引擎流量。通過使用 AMP 優先頁面，我們將 AMP 的快速體驗帶到主網站，包括桌面版。

要實現 AMP 優先頁面，您可以使用 withAmp 函數包裝頁面：

import { withAmp } from 'next/amp';
function HomePage() {
  return <p>Welcome to AMP + Next.js.</p>;
}
 
export default withAmp(HomePage);

如果您不需要 Next.js 運行時，使用 AMP 優先頁面可以幫助加快開發速度。AMP 優先要求您僅使用 AMP 相容的元件來建立頁面。目前 nextjs.org/docs 和 nextjs.org/blog 已採用 AMP 優先頁面。

在元件中區分 AMP 渲染

您專案中的任何 React 元件都可以利用 useAmp 來區分 AMP 和非 AMP 渲染模式。這允許您實作一個 <Image> 元件，在 <img> 和 <amp-img> 之間共享邏輯：

import { useAmp } from 'next/amp';
 
export function Image({ src, width, height }) {
  const isAmp = useAmp();
  return isAmp ? (
    <amp-img src={src} width={width} height={height} />
  ) : (
    <img src={src} width={width} height={height} />
  );
}

import { withAmp } from 'next/amp';
import { Image } from '../components/image';
 
function HomePage() {
  return (
    <>
      <p>Hello! Welcome to AMP + Next.js.</p>
      <Image src="https://placehold.it/120" width="120" height="120" />
    </>
  );
}
 
export default withAmp(HomePage, { hybrid: true });

AMP 開發的自動重新載入

在開發過程中，我們不使用熱模組替換（hot-module-replacement），而是追蹤您當前所在頁面的任何更改，並僅在頁面發生更改時重新載入頁面。我們使用完整重新載入而非熱模組替換的原因，是為了確保您始終能看到 AMP 頁面的最新伺服器端渲染結果。

AMP 驗證

為了確保僅產生有效的 AMP 頁面，我們在開發過程中會使用 amphtml-validator 自動驗證它們。錯誤和警告將顯示在您啟動 Next.js 的終端機中。

在 next export 過程中也會驗證頁面，任何問題都將打印到終端機。任何 AMP 錯誤都會導致 next export 失敗，因為導出的內容不是有效的 AMP。

學習如何在 Next.js 中使用 AMP

除了學習如何使用 Next.js 外，我們還新增了一個章節來學習如何在 Next.js 中使用 AMP。

或者，您可以透過 AMP 範例開始使用：

npx create-next-app --example amp amp-app