請試試將 AMP 新增至 Next.js 應用程式的兩種方法。
您會學到什麼?
本程式碼研究室可讓您嘗試兩種方法,可在 Next.js 應用程式中使用 AMP。請參閱如何在 Next.js 應用程式中確保 AMP 的運作速度,瞭解您可能會在 Next.js 應用程式中新增 AMP 支援的原因。
如何建立混合式 AMP 網頁
混合式 AMP 方法可用來為所有 Next.js 網頁建立隨附的 AMP 版本。過去,當主要版本網頁中有 AMP 無法支援的體驗時,就經常採用混合式方法。主要版本擁有完整體驗,而 AMP 網頁的使用體驗會稍微降級。隨著 amp-script 的問世,您已不太需要採用混合式方法,但現在我們會提供完整說明,以防您仍需使用這項技術。
您可以透過多種方式設定 Next.js 轉譯及提供頁面的方式。只要使用 config
物件,即可逐頁修改這些項目。如要提供特定網頁做為 AMP 網頁,您需要匯出物件中的 amp
屬性:
import React from 'react'
export const config = { amp: 'hybrid' };
const Home = () => (
<p>This is the home page</p>
);
export default Home;
按一下「Remix to Edit」,讓專案可供編輯。
如要預覽網站,請按下「查看應用程式」,然後按下「全螢幕」圖示 。
在網址結尾加上
?amp=1
。網頁看起來一樣,但您在查看主控台時,會發現系統轉譯了該網頁的 AMP 版本。
網頁只有單一 <p>
標記,因此主要網頁與對應的 AMP 版本沒有明顯差別。
如何有條件提供 AMP 元件
AMP 網頁需要有一組有效的元件來取代許多 HTML 元素,請務必確保 AMP 元件只針對 AMP 網頁提供特定條件。
Next.js 提供名為 useAmp
的掛鉤,可讓您根據要求的頁面版本,有條件地提供不同的元素。
如要查看原始碼,請按下「檢視原始碼」。
編輯
pages/index.js
,讓系統根據所要求的主要版本或 AMP 版本,在頁面中算繪不同的段落元素:import React from 'react'; import { useAmp } from 'next/amp'; export const config = { amp: 'hybrid' }; const Home = () => ( useAmp() ? ( <p>This is the <strong>AMP</strong> version of the home page</p> ) : ( <p>This is the main version of the home page</p> ) ); export default Home;
載入網頁的主要版本:
再次在網址結尾加上
?amp=1
,即可載入網頁的 AMP 版本:請嘗試轉譯以 AMP 取代的圖片標記
amp-img
:import React from 'react'; import { useAmp } from 'next/amp'; export const config = { amp: 'hybrid' }; const imgSrc = 'https://placekitten.com/1000/1000'; const Image = () => ( useAmp() ? ( <amp-img alt="A cute kitten" src={imgSrc} width="1000" height="1000" layout="responsive"> </amp-img> ) : ( <img alt="A cute kitten" src={imgSrc} width="1000" height="1000"> </img> ) ); const Home = () => ( <div> <Image /> </div> ); export default Home;
layout="responsive"
會自動轉譯完全回應式的圖片,其顯示比例由寬度和高度指定。請參閱「版面配置和媒體查詢」,進一步瞭解支援的 AMP 元素版面配置;請參閱 amp-img,進一步瞭解該元素的最佳化作業。再次查看網頁的主要版本。
再次查看 AMP 版本的網頁。
如何建立僅限 AMP 的網頁
Next.js 也支援僅限 AMP 網頁。透過這種方法,使用者和搜尋引擎都能隨時提供及轉譯單一 AMP 網頁。
如要轉譯僅限 AMP 的網頁,請將 config 物件中的
amp
屬性值變更為true
。import React from 'react' export const config = { amp: true }; const Home = () => ( <p>This is an AMP-only page</p> ); export default Home;