Pages Router：第三方 JavaScript | Next.js

第三方 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://connect.facebook.net/en_US/sdk.js" />
</Head>

此脚本包含 Facebook SDK，通常用于添加 Facebook 社交插件和其他功能。虽然这种方法有效，但以这种方式包含脚本并不能明确显示它相对于页面上其他 JavaScript 代码的加载时机。如果某个脚本阻塞渲染并延迟页面内容的加载，可能会显著影响性能。

使用 Script 组件

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://connect.facebook.net/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 代码。在此示例中，我们在控制台打印一条消息，表明脚本已正确加载。

尝试访问 http://localhost:3000/posts/first-post。使用浏览器的开发者工具，你应该会在 Console 面板中看到上述消息。此外，你可以运行 window.FB 来确认脚本已填充此全局变量。

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

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

第三方 JavaScript

添加第三方 JavaScript

使用 Script 组件

On this page