章节14

第三方 JavaScript

第三方 JavaScript 指的是从第三方来源添加的任何脚本。通常，引入第三方脚本是为了在站点中引入不需要从头编写的新功能，例如分析、广告和客户支持小部件。

添加第三方 JavaScript

让我们深入了解如何将第三方脚本添加到 Next.js 页面。

在编辑器中打开 pages/posts/first-post.js，找到以下几行代码

<Head>
  <title>First Post</title>
</Head>

除了元数据之外，需要尽快加载和执行的脚本通常会添加到页面的 <head> 中。使用常规的 HTML <script> 元素，外部脚本将如下添加

<Head>
  <title>First Post</title>
  <script src="https://#/en_US/sdk.js" />
</Head>

此脚本包含 Facebook SDK，它通常用于引入 Facebook 社交插件和其他功能。尽管这种方法可行，但以这种方式包含脚本无法清楚地表明它相对于同一页面上获取的其他 JavaScript 代码何时加载。如果某个特定脚本会阻塞渲染并可能延迟页面内容的加载，这可能会显著影响性能。

使用脚本组件

next/script 是 HTML <script> 元素的扩展，它优化了附加脚本的获取和执行时机。

在同一个文件中，在文件开头添加 next/script 的 Script 导入

import Script from 'next/script';

现在，更新 FirstPost 组件以包含 Script 组件

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <Script
        src="https://#/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() =>
          console.log(`script loaded correctly, window.FB has been populated`)
        }
      />
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

请注意，在 Script 组件中定义了一些附加属性

strategy 控制第三方脚本何时加载。lazyOnload 值告诉 Next.js 在浏览器空闲时间懒加载此特定脚本
onLoad 用于在脚本加载完成后立即运行任何 JavaScript 代码。在此示例中，我们向控制台记录一条消息，指出脚本已正确加载

尝试访问 https://:3000/posts/first-post。通过使用浏览器的开发者工具，您应该在 Console 面板中看到上面记录的消息。此外，您可以运行 window.FB 来查看脚本是否已填充此全局变量。

注意： Facebook SDK 仅作为一个人为设计的示例，用于展示如何以高性能的方式将第三方脚本添加到您的应用程序中。现在您已了解在 Next.js 中包含第三方功能的基础知识，您可以在继续之前从 FirstPost 中删除 Script 组件。

要了解有关 Script 组件的更多信息，请查阅文档。

第三方 JavaScript

添加第三方 JavaScript

使用脚本组件

您已完成本章14