Next.js高级特性:AMP支持

APM简介

使用Next.js,您可以在不离开React的情况下,以最少的配置将任何React页面变成AMP页面。

您可以在amp.dev官方网站上了解有关AMP的更多信息。

启用AMP

要为页面启用AMP支持,并了解有关不同AMP配置的更多信息,请阅读的API文档next/amp

注意事项

  • 仅支持CSS-in-JS。AMP页面目前不支持CSS模块。

添加AMP组件

AMP社区提供了许多组件,以使AMP页面更具交互性。Next.js将自动导入页面上使用的所有组件,并且无需手动导入AMP组件脚本:

export const config = { amp: true }

function MyAmpPage() {
  const date = new Date()

  return (
    <div>
      <p>Some time: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage

上面的示例使用了该amp-timeago组件。

默认情况下,始终导入组件的最新版本。如果要自定义版本,可以使用next/head,如以下示例所示:

import Head from 'next/head'

export const config = { amp: true }

function MyAmpPage() {
  const date = new Date()

  return (
    <div>
      <Head>
        <script
          async
          key="amp-timeago"
          custom-element="amp-timeago"
          src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"
        />
      </Head>

      <p>Some time: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage

AMP验证

在开发过程中,将使用amphtml-validator自动验证AMP页面。错误和警告将出现在您启动Next.js的终端中。

页面也将在静态HTML导出期间进行验证,并且任何警告/错误都将被打印到终端上。任何AMP错误都将导致导出退出并显示状态代码,1因为导出不是有效的AMP。

定制验证器

您可以next.config.js按如下所示设置自定义AMP验证器:

module.exports = {
  amp: {
    validator: './custom_validator.js',
  },
}

跳过AMP验证

要关闭AMP验证,请将以下代码添加到 next.config.js

experimental: {
  amp: {
    skipValidation: true
  }
}

静态HTML导出中的AMP

当用next export做静态HTML出口静态预渲染页面,Next.js将检测如果页面支持AMP,改变基于这样的出口行为。

例如,混合AMP页面pages/about.js将输出:

  • out/about.html -带有客户端React运行时的HTML页面
  • out/about.amp.html -AMP页面

如果pages/about.js是仅AMP的页面,则它将输出:

  • out/about.html -优化的AMP页面

Next.js会自动以HTML版本插入指向页面的AMP版本的链接,因此您不必这样做:

<link rel="amphtml" href="/about.amp.html" />

页面的AMP版本将包含指向HTML页面的链接:

<link rel="canonical" href="/about" />

trailingSlash启用了输出页pages/about.js将是:

  • out/about/index.html -HTML页面
  • out/about.amp/index.html -AMP页面

TypeScript

AMP当前没有TypeScript的内置类型,但是在其开发路线中(#13791)。

解决方法是,您可以amp.d.ts在项目内部手动创建一个名为的文件,并添加此处描述的自定义类型。

作者:terry,如若转载,请注明出处:https://www.web176.com/nextjs/2436.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年4月20日 下午2:47
下一篇 2021年4月20日 下午2:56

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注


Fatal error: Uncaught JSMin_UnterminatedRegExpException: JSMin: Unterminated RegExp at byte 17: /Head> in /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/jsmin.php:266 Stack trace: #0 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/jsmin.php(152): JSMin->action() #1 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/jsmin.php(86): JSMin->min() #2 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/ao-minify-html.php(257): JSMin::minify() #3 [internal function]: AO_Minify_HTML->_removeScriptCB() #4 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/ao-minify-html.php(108): preg_replace_callback() #5 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/ao-minify-html.php(47): AO_Minify_HTML->process() #6 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/autoptimizeHTML.php(105): AO_Minify_HTML::minify() #7 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes in /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/jsmin.php on line 266