Next.js 如何使用 AMP？

推荐答案

在 Next.js 中使用 AMP（Accelerated Mobile Pages）非常简单。你可以通过以下步骤来实现：

1. 创建 AMP 页面：在 pages 目录下创建一个新的页面文件，例如 about.js，并在页面组件中导出 config 对象，设置 amp: true。

   // www.javascriptcn.com code example
   export const config = { amp: true };
   
   export default function AboutPage() {
     return (
       <div>
         <h1>About Us</h1>
         <p>This is the about page in AMP format.</p>
       </div>
     );
   }

2. 混合 AMP 页面：如果你希望页面同时支持 AMP 和普通 HTML，可以使用 amp: 'hybrid'。

   // www.javascriptcn.com code example
   export const config = { amp: 'hybrid' };
   
   export default function AboutPage({ isAmp }) {
     return (
       <div>
         <h1>About Us</h1>
         <p>This is the about page in {isAmp ? 'AMP' : 'normal'} format.</p>
       </div>
     );
   }
   
   export async function getStaticProps() {
     return {
       props: {
         isAmp: false,
       },
     };
   }

3. 自定义 AMP 组件：Next.js 允许你使用 AMP 组件，例如 <amp-img>，只需在页面中直接使用即可。

   // www.javascriptcn.com code example
   export const config = { amp: true };
   
   export default function ImagePage() {
     return (
       <div>
         <h1>Image Page</h1>
         <amp-img
           src="/image.jpg"
           alt="A cool image"
           width="600"
           height="400"
           layout="responsive"
         />
       </div>
     );
   }

本题详细解读

1. AMP 简介

AMP 是 Google 推出的一个开源框架，旨在加速移动页面的加载速度。它通过限制 HTML、CSS 和 JavaScript 的使用，并提供优化的组件来实现这一目标。AMP 页面通常加载速度非常快，适合用于新闻、博客等内容型网站。

2. Next.js 中的 AMP 支持

Next.js 提供了内置的 AMP 支持，允许开发者轻松创建 AMP 页面。通过在页面组件中导出 config 对象并设置 amp: true，Next.js 会自动将该页面转换为 AMP 格式。

3. 创建纯 AMP 页面

纯 AMP 页面是指整个页面都遵循 AMP 规范。在 Next.js 中，你只需在页面组件中导出 config 对象并设置 amp: true，Next.js 会自动处理页面的 AMP 转换。

4. 创建混合 AMP 页面

混合 AMP 页面是指页面同时支持 AMP 和普通 HTML 格式。通过设置 amp: 'hybrid'，Next.js 会生成两个版本的页面：一个 AMP 版本和一个普通 HTML 版本。你可以根据用户请求的格式返回相应的页面。

5. 使用 AMP 组件

AMP 提供了一系列优化后的组件，例如 <amp-img>、<amp-video> 等。在 Next.js 中，你可以直接在页面中使用这些组件，Next.js 会自动处理它们的加载和渲染。

6. AMP 页面的优化

由于 AMP 页面的特殊性，开发者需要注意以下几点：

• 限制 JavaScript 使用：AMP 页面中不允许使用自定义 JavaScript，只能使用 AMP 提供的组件和功能。
• 样式限制：AMP 页面的样式必须内联在 <style amp-custom> 标签中，且大小不能超过 50KB。
• 图片优化：使用 <amp-img> 组件来加载图片，确保图片的加载性能。

通过以上步骤和注意事项，你可以在 Next.js 中轻松创建和优化 AMP 页面。