Next.js 8.1

今天，我們很高興宣布已將 Next.js 體驗擴展到編寫 AMP 頁面。

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

什麼是 AMP？

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

Next.js Google search result — 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 選項

pages/index.js

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

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

Image of Reddit using AMP to better SEO — Reddit 使用 AMP 來改善 SEO 的圖片

Image of Reddit in AMP viewer — AMP 檢視器中 Reddit 的圖片

AMP 優先頁面

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

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

pages/index.js

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 渲染模式。這允許您實作一個 <Image> 組件，該組件在 <img> 和 <amp-img> 之間共享邏輯

components/image.js

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} />
  );
}

pages/index.js

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 });

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

什麼是 AMP？

Next.js 中的 AMP

混合 AMP 頁面

AMP 優先頁面

區分組件中的 AMP 渲染

用於 AMP 開發的自動重新載入

AMP 驗證

學習將 AMP 與 Next.js 搭配使用