如何在 Next.js 中使用 AMP

尝试通过两种方式将 AMP 添加到 Next.js 应用中

Houssein Djirdeh

若要按照此 Codelab 操作，请在第二个标签页中打开此 Glitch。

您将学到什么？

在此 Codelab 中，您可以尝试在 Next.js 应用中使用 AMP 的两种方法。请参阅 AMP 如何保证 Next.js 应用中的速度，了解为何您可能需要为 Next.js 应用添加 AMP 支持。

如何创建混合 AMP 网页

注意 ：要将 AMP 与 Next.js 结合使用，建议采用仅限 AMP 的方法。与仅使用 AMP 的方法相比，本部分中介绍的混合 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;

1. 点击 Remix to Edit 使项目可修改。

2. 如需预览网站，请按查看应用，然后按全屏 。

3. 将 ?amp=1 添加到网址末尾。该网页看起来并未发生变化，但如果您查看控制台，则会发现系统正在呈现该网页的 AMP 版本。

由于网页只有一个 <p> 标记，因此主页与其 AMP 版本之间没有明显的区别。

如何有条件地提供 AMP 组件

AMP 网页需要有自己的一组有效组件来代替许多 HTML 元素。请务必确保仅针对 AMP 网页有条件地提供 AMP 组件。Next.js 提供了一个名为 useAmp 的钩子，可让您根据请求的网页版本，有条件地提供不同的元素。

1. 要查看源代码，请按查看源代码。

2. 修改 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;
   

3. 加载网页的主版本：

   

4. 再次将 ?amp=1 添加到该网址的末尾，以加载网页的 AMP 版本：

   

5. 尝试呈现 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。

6. 再次查看该网页的主版本。

   

7. 再次查看该网页的 AMP 版本。

   

如何创建仅限 AMP 的网页

Next.js 还支持仅限 AMP 的网页。通过这种方法，Google 会始终向用户和搜索引擎提供并呈现一个 AMP 网页。

1. 若要呈现仅限 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;