如何在 Next.js 中使用 AMP

试用两种可将 AMP 添加到 Next.js 应用的方法

Houssein Djirdeh

如需完成此 Codelab，请在第二个标签页中打开 this 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 的网页。采用这种方法时，系统会提供并呈现单个 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;