第三方 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 代码的加载时间。如果某个特定脚本是渲染阻塞的，并且可能会延迟页面内容的加载，则这可能会严重影响性能。
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 代码。在此示例中，我们向控制台记录一条消息，指出脚本已正确加载尝试访问 https://127.0.0.1:3000/posts/first-post。通过使用浏览器的开发者工具，你应该会在 控制台 面板中看到上面记录的消息。此外，你可以运行 window.FB 以查看脚本是否已填充此全局变量。
注意： Facebook SDK 仅用作一个人为的示例，以展示如何以高性能的方式将第三方脚本添加到你的应用程序中。现在你已经了解了在 Next.js 中包含第三方功能的基础知识，你可以在继续操作之前从 FirstPost 中删除 Script 组件。
要了解有关
Script组件的更多信息，请查看 文档。
快速复习：next/script 为你简化了什么？