Next.js 的 AMP 技术实践

在当今网站设计和开发中，响应式网页设计和面向移动设备的体验已经成为必不可少的一个环节。当用户在移动设备上浏览页面时，快速加载和高度优化的用户体验无疑将成为最重要的考虑因素之一。

在这种情况下，Google 推出了 AMP（加速移动页面）这个技术，来帮助页面快速加载和提高用户体验。在前端技术中，现有的可用框架中，Next.js 也逐渐适应于 AMP 技术。通过借助 Next.js 的优秀特性和 AMP 标准，我们可以更快地创造针对移动设备的优化体验。

Next.js 简介

Next.js 是一个令人兴奋的开源项目，它致力于提供开发服务器渲染 React 应用程序所需的一切。它为开发人员构建和服务 React 应用程序提供了一整套工具和功能，并为您处理大量的底层细节，让您专注于开发自己的应用程序。

有几个 Next.js 的关键特点，值得关注：

• 基于 React 的服务端渲染；
• 内置支持异步加载的模块；
• 自动优化代码拆分；
• 支持完整的 CSS 模块化，无需引入其他工具；
• 内置支持同构数据获取等。

对于需要考虑 SEO 和跨平台支持的项目，Next.js 是一个不错的选择。

AMP 简介

AMP 为资讯页面加速，是一个由 Google 正在推广的开源项目。它采用 HTML 的子集，其主要目的是将页面元素权重进行简化，使页面加载速度更快，同时不影响用户浏览体验。

当前，在 AMP.html 子集中有许多不可用的标签和属性，同时添加了许多自定义 AMP 标记以实现增强功能。一些基本的 HTML / CSS 构造和技术仍然适用于构建 AMP 网站，但是许多要求用户交互的技术，如 JavaScript、Ajax 等，需要进行特殊的处理。

Next.js 如何实现 AMP

在 Next.js 中集成 AMP 要点如下：

1. 使用 Next.js 的简单步骤：

    $ npx create-next-app --example with-amp with-amp-app
    $ cd with-amp-app

   // 安装npm

    $ npm install
    $ npm run dev

2. 编写 AmpPage.js 文件, 文件中需要特别注意以下标签。

   • 端口代码时需要特别注意 'px' 的使用

   // javascriptcn.com 代码示例
     <amp-img
       src="https://images.unsplash.com/photo-1534849118530-d5b5b5c829cd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=45b943b343abda693fd5561d6f3ea6bd&auto=format&fit=crop&w=750&q=80"
       width="720"
       height="960"
       layout="responsive"
     />
   
     <amp-video
       autoplay
       loop
       width="720"
       height="960"
       layout="responsive"
     >
       <source
         src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
         type="video/mp4"
       />
     </amp-video>
   
     <amp-img
       src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4bd3d3d50a45be0151922c60b6029ab9&auto=format&fit=crop&w=750&q=80"
       width="234"
       height="416"
       layout="fill"
     />
   
     <amp-ad
       layout="responsive"
       width="320"
       height="50"
       type="adsense"
       data-ad-client="ca-pub-1234567890123456"
       data-ad-slot="6543210987"
     />

3. 完成以上步骤后，使用 npm run dev 进行本地开发即可预览整个 Next.js AMP 应用程序。

给初学者的建议

如果您是初学者，并且想要学习一些关于 AMP 和 Next.js 等技术的知识，以下是一些建议：

1. 在网上寻找 AMP 的示例，找到有助于您了解代码结构和功能的示例。
2. 仔细阅读 Next.js 相关文档，并查看在项目中使用这些技术示例的实现。
3. 理解 AMP 和 Next.js 是如何相互作用的，以及它们是如何处理您的网站/应用程序并为您实现优化和响应的页面加载。

总结

通过结合 Next.js 和 AMP 技术，我们可以更轻松地构建优化的移动体验和更快速的页面加载，同时不需要牺牲功能和外观的制作。 Next.js 可以帮助我们渲染 React 应用程序，参与这些现代的前端技术，以实现更快的加速和更好的用户体验，这不仅是为用户提供质量更高的东西，还可以让前端开发人员在以后的项目中工作更加有效。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653dd0a07d4982a6eb77d0fb