试用两种可将 AMP 添加到 Next.js 应用的方法
您将学到什么?
在此 Codelab 中,您可以试用在 Next.js 应用中使用 AMP 的两种方法。 请参阅 AMP 如何保证 Next.js 应用中的速度,了解您为何 可能希望为您的 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 版本。
![Chrome 开发者工具控制台中的实际网页和一条消息,其中指明该网页由 AMP 提供支持。](https://web.developers.google.cn/static/articles/how-to-use-amp-in-nextjs/image/the-live-page-a-message-da2dbcd870547.png?authuser=5&hl=nb)
由于网页只有一个 <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 的网页,请将配置对象中
amp
属性的值更改为true
。import React from 'react' export const config = { amp: true }; const Home = () => ( <p>This is an AMP-only page</p> ); export default Home;