许多应用程序依赖于第三方 JavaScript 来包含不同类型的功能，例如分析、广告和客户支持小部件。但是，如果过早加载嵌入的第三方代码，可能会延迟页面内容的渲染并影响用户性能。
Next.js 提供了一个内置的 Script 组件 它可以优化任何第三方脚本的加载，同时让开发者可以选择何时获取和执行它。
使用常规 HTML，需要手动将外部脚本附加到 next/head:
import Head from 'next/head';
function IndexPage() {
return (
<div>
<Head>
<script src="https://127.0.0.1/gtag/js?id=123" />
</Head>
</div>
);
}
使用 Next.js Script 组件，你可以在组件中的任何位置添加它，而无需使用next/head
import Script from 'next/script';
function IndexPage() {
return (
<div>
<Script
strategy="afterInteractive"
src="https://127.0.0.1/gtag/js?id=123"
/>
</div>
);
}
Script 组件引入了 strategy 属性，允许你决定何时获取和执行脚本以实现最佳加载。为了不影响最大内容绘制 (LCP)，大多数第三方脚本应该延迟加载，在页面所有内容加载完成后再加载，可以在页面变为可交互后立即加载 (strategy="afterInteractive") 或在浏览器空闲时延迟加载 (strategy="lazyOnload")。
next/script 的 API 参考