Next.js 8.1 版本发布

今天我们很高兴地宣布，Next.js 现已支持 AMP 页面开发。

• 什么是 AMP
• Next.js 中的 AMP
• 混合 AMP 页面
• AMP 优先页面
• AMP 验证

什么是 AMP？

AMP 是一项构建高性能网页的标准，它能最小化渲染开销，并可在知名搜索引擎中获得增强型索引。例如，AMP 页面会直接加载到 Google 移动搜索结果中，并带有闪电图标标记。

AMP HTML 是 HTML 的更严格版本，通过一些限制来实现更可靠的性能和更好的可扩展性。部分 HTML 标签被替换为 AMP 专用标签以提供更好的体验。例如 amp-img 标签即使在尚未支持该特性的浏览器中也能提供完整的 srcset 支持。

支持 AMP 的搜索引擎会自动发现 AMP 页面。这些搜索引擎通常实现了 AMP 缓存（如 Google 和 Bing），帮助页面在搜索结果中更快呈现。

Next.js 中的 AMP

今天我们很高兴地宣布，Next.js 现已支持 AMP 页面开发。这意味着您现在可以利用 React 组件来创建 AMP 页面。AMP 支持按页面配置，允许渐进式采用。Next.js 提供两种启用 AMP 的方式：混合 AMP 页面或 AMP 优先页面。

混合 AMP 页面

混合 AMP 页面允许您为传统页面创建 AMP 版本，使搜索引擎能在移动搜索结果中展示 AMP 版本，同时保留原版页面。这样既能在应用中使用 AMP，又能保持 Next.js 特性（如客户端路由）为主体验服务。

通过 withAmp 函数并设置 hybrid: true 选项即可创建混合 AMP 页面：

function HomePage() {
  return <p>Welcome to AMP + Next.js.</p>;
}
 
export default withAmp(HomePage, { hybrid: true });

Reddit 是生产环境使用混合 AMP 模式的典型案例。每个帖子都存储在 Google AMP 缓存中，为移动端提供快速体验，同时为桌面端和后续导航保留完整功能。

AMP 优先页面

AMP 优先页面将同时服务于网站主流量和搜索引擎流量。通过这种方式，我们将 AMP 的快速体验带到了包括桌面端在内的主网站。

实现 AMP 优先页面只需用 withAmp 包装页面：

import { withAmp } from 'next/amp';
function HomePage() {
  return <p>Welcome to AMP + Next.js.</p>;
}
 
export default withAmp(HomePage);

如果您不需要 Next.js 运行时，使用 AMP 优先页面可以加速开发。这种方式要求仅使用 AMP 兼容组件构建页面。nextjs.org/docs 和 nextjs.org/blog 目前已在生产环境使用 AMP 优先页面。

组件中的 AMP 渲染区分

项目中任何 React 组件都可以使用 useAmp 来区分 AMP 和非 AMP 渲染模式。这允许您实现一个共享 <img> 和 <amp-img> 逻辑的 <Image> 组件：

import { useAmp } from 'next/amp';
 
export function Image({ src, width, height }) {
  const isAmp = useAmp();
  return isAmp ? (
    <amp-img src={src} width={width} height={height} />
  ) : (
    <img src={src} width={width} height={height} />
  );
}

import { withAmp } from 'next/amp';
import { Image } from '../components/image';
 
function HomePage() {
  return (
    <>
      <p>Hello! Welcome to AMP + Next.js.</p>
      <Image src="https://placehold.it/120" width="120" height="120" />
    </>
  );
}
 
export default withAmp(HomePage, { hybrid: true });

AMP 开发的自动重载

在开发环境中，我们不会使用热模块替换，而是跟踪当前页面的所有变更，仅在页面被修改时重新加载。采用完整重载而非热模块替换是为了确保您始终看到 AMP 页面的最新服务端渲染结果。

AMP 验证

为确保只生成有效的 AMP 页面，我们在开发过程中使用 amphtml-validator 自动验证。错误和警告会显示在启动 Next.js 的终端中。

执行 next export 时也会验证页面，所有问题都会打印到终端。任何 AMP 错误都会导致导出失败，因为生成的不是有效 AMP。

学习在 Next.js 中使用 AMP

除了学习 Next.js 使用方式外，我们还新增了学习如何在 Next.js 中使用 AMP 的章节。

您也可以通过 AMP 示例项目快速开始：

npx create-next-app --example amp amp-app