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。

学习如何使用 Next.js 中的 AMP

除了学习如何使用 Next.js 之外，我们还在 此处 添加了一个新部分，介绍如何在 Next.js 中使用 AMP。

或者，您可以使用 AMP 示例 开始。

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