Next.js 8.1

今天，我們很高興地宣布，我們已將 Next.js 的體驗擴展到 AMP 網頁的製作。

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

什麼是 AMP？

AMP 是一個用於構建高性能網站的標準，它最大限度地減少了渲染開銷，並且可以在知名的搜尋引擎上建立索引，並具有增強的行為。例如，AMP 網頁會直接載入到 Google 的行動搜尋結果中，並以閃電圖示標記。

AMP HTML 是 HTML 的更嚴格版本，它施加了一些限制以實現更可靠的性能和更好的可擴展性。一些 HTML 標籤被 AMP 特定的 HTML 標籤取代，以提供比其對應的 HTML 標籤更好的體驗。例如，amp-img 標籤即使在尚不支援它的瀏覽器中也提供完整的 srcset 支援。

支援 AMP 的搜尋引擎會自動發現 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 版本。

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 相容的組件來構建您的頁面。AMP 優先頁面目前已在 nextjs.org/docs 和 nextjs.org/blog 上線。

在組件中區分 AMP 渲染

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

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