随着移动设备成为主流，提高移动设备访问网页的速度越来越重要，而 AMP 技术就是为此而生。AMP 是 Google 在 2015 年推出的一项快速打开移动网页的技术，可在移动端提供更快的加载速度和更流畅的用户体验。但是，实现 AMP 并不容易。本文将介绍如何利用 Next.js 实现 AMP，让你的网页飞起来。
什么是 Next.js？
Next.js 是一个基于 React 的轻量级服务端渲染框架，提供了许多在开发过程中需要的功能，例如自动代码分割、服务端渲染、静态文件服务等。同时，它还支持 SSR（服务器端渲染）、静态导出、动态导出等多种导出方式，这使得 Next.js 在构建 Web 应用程序时非常灵活和方便。
安装 Next.js
使用以下命令安装 Next.js：
npm install --save next react react-dom
创建 AMP 页面
为了让 Next.js 页面支持 AMP，我们需要更改以下几个地方：
- 页面采用
.amp.html后缀命名； - 页面的头部需要有一些必须的元数据；
- 页面只能包含放置在
<head>中的特定样式和脚本； - 页面只能使用特定的 HTML、CSS 和 JavaScript 特性。
让我们来创建一个简单的 AMP 页面。在 pages 目录下新建一个名为 index.amp.html 的文件，然后将下面的代码复制到文件中：
-- -------------------- ---- ------- --------- ----- ----- ---- ------ ----- ---------------- ----- --------------- --------- ----- --------------- ------------------------------------------------------------- ------- ----- ------------------------------------------------ ------------- ------------ ------- ------ ---------- --------- ------- -------
AMP 页面的头部至少需要包含以下元素：
<!doctype html>声明；<html amp>样式选择器；<meta charset>元数据标记；<link rel="canonical">元数据，用于通知搜索引擎源网页的位置；<meta name="viewport">元数据，规定应当使用多少缩放。
我们还在 head 中包含了 AMP 的 JavaScript 核心库，它使得其余的组件和脚本可以与 AMP 页面交互。
在 Next.js 中使用 AMP
我们需要用 Next.js 的动态页面导出功能来让服务端基于请求来区分是否需要使用 AMP。为了实现这个目标，我们需要修改 Next.js 配置文件 next.config.js 如下：
-- -------------------- ---- -------
----- ----- - ----- -- -
-- -------------------
-- ----- ---------- ------ - ------ ----
------ ------------- -- ---
-
-------------- - -
-------------- ----- -------- ---------------- -
------ -
---- - ----- --- --
------------------ - ----- --------- ------ - ---- --- - -
-
--
-------- -------- -------- -
--------------------------
----- ---------------
---- ------------
--
------ ------
--
------------ ---------- - ------------------------------- - --
-这段代码实现了以下几个功能：
exportPathMap：设置服务端基于请求动态导出页面；webpack：给 Next.js 告诉如何处理.amp.html结尾的页面；assetPrefix：在isAmp返回 true 时，将使用 AMP CDN 图片等静态文件。
接下来，让我们在 pages 目录下新建一个名为 index.js 的文件，然后将下面的代码复制到文件中：
-- -------------------- ---- -------
------ ----- ---- -------
----- ----- - -- ----- -- -- -
-----
-------- --- ------ - --- --- ----- - --- ------ -----------
------ -
--------- -- --- ------------- -
--------- -- ------- -------------
-
-- --------------- - -- - ------------------ --------
------
-
--------------------- - -- ----- -- -- -- ------ --------- --- --- --
------ ------- -----这段代码实现了以下功能：
- 动态展示页面类型（AMP 或非 AMP）；
- 切换页面类型的链接。
你现在已经可以启动 Next.js 并访问 http://localhost:3000/index，然后在此 URL 后加上 ?amp=1 访问 AMP 页面。在进行访问后，你会看到一个类似于下图的页面：
结论
本文介绍了如何利用 Next.js 来创建 AMP 页面。我们了解了 AMP 页面的结构和内容，以及如何在 Next.js 中动态输出页面，以支持 AMP 和非 AMP 页面。希望你能够受益于本文，并能够在实际开发过程中运用到这些技术。
如果你还想了解更多关于 Next.js 的内容，可以参考 Next.js 文档 https://nextjs.org/docs/getting-started。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6715c306ad1e889fe218cb70