Next.js 8.1

今天，我们很高兴地宣布，我们已将 Next.js 体验扩展到编写 AMP 页面。

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

什么是 AMP？

AMP 是一种用于构建高性能网站的标准，它可以最大限度地减少渲染开销，并且可以在知名的搜索引擎上索引，并具有增强的行为。例如，AMP 页面直接加载到 Google 的移动搜索结果中，并以闪电图标标记。

AMP HTML 是 HTML 的更严格版本，它施加了一些限制，以实现更可靠的性能和更好的可扩展性。一些 HTML 标签被替换为 AMP 特定的 HTML 标签，以提供比其对应的 HTML 标签更好的体验。例如，amp-img 标签即使在尚不支持它的浏览器中也提供完整的 srcset 支持。

支持 AMP 的搜索引擎会自动发现 AMP 页面。这些搜索引擎通常实现 AMP 缓存 （例如 Google 和 Bing）。AMP 缓存有助于页面从其搜索结果中更快地渲染。

Next.js 中的 AMP

今天，我们很高兴地宣布，我们已将 Next.js 体验扩展到编写 AMP 页面。这意味着您现在可以利用 React 组件的强大功能来创建 AMP 页面。AMP 支持是按页面定义的，允许 AMP 的增量采用。在 Next.js 中启用 AMP 有两种方法：混合 AMP 页面或 AMP 优先页面。

混合 AMP 页面

混合 AMP 页面允许您拥有传统页面的配套 AMP 版本，以便搜索引擎可以在移动搜索结果中显示页面的 AMP 版本，同时保持页面的现有版本。这使得可以在您的应用程序中使用 AMP，同时仍然可以使用 Next.js 功能，例如用于主要用户体验的客户端路由。

要选择加入混合 AMP 页面，请使用 withAmp 函数，同时提供 hybrid: true 选项

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

Reddit 是生产中使用的混合 AMP 模式的一个示例。每个帖子都存储在 Google 的 AMP 缓存 中，以便在移动网络上提供快速的用户体验，同时仍然为桌面和后续导航提供完整版本的 Reddit。

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 优先要求您仅使用 AMP 兼容组件来构建页面。AMP 优先页面目前在 nextjs.org/docs 和 nextjs.org/blog 上投入生产。

区分组件中的 AMP 渲染

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

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 错误都会导致 next export 失败，因为导出的 AMP 无效。

学习将 AMP 与 Next.js 结合使用

除了学习如何使用 Next.js 之外，我们还在 学习如何在 Next.js 中使用 AMP 中添加了一个新章节。

或者，开始使用 AMP 示例

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