How to load and optimize scripts
布局脚本
要为多个路由加载第三方脚本，导入 next/script 并直接在你的布局组件中包含该脚本：
import Script from 'next/script'
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<section>{children}</section>
<Script src="https://example.com/script.js" />
</>
)
}当用户访问文件夹路由（例如 dashboard/page.js）或任何嵌套路由（例如 dashboard/settings/page.js）时，第三方脚本将被获取。Next.js 将确保脚本仅加载一次，即使用户在同一布局中的多个路由之间导航。
应用脚本
要为所有路由加载第三方脚本，导入 next/script 并直接在你的根布局中包含该脚本：
import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
<Script src="https://example.com/script.js" />
</html>
)
}当访问应用程序中的_任何_路由时，此脚本将加载并执行。Next.js 将确保脚本仅加载一次，即使用户在多个页面之间导航。
建议：我们建议仅在特定页面或布局中包含第三方脚本，以最小化对性能的不必要影响。
策略
虽然 next/script 的默认行为允许你在任何页面或布局中加载第三方脚本，但你可以通过使用 strategy 属性来微调其加载行为：
beforeInteractive：在任何 Next.js 代码之前和页面水合作用发生之前加载脚本。afterInteractive：(默认) 在页面上发生一些水合作用后提前加载脚本。lazyOnload：在浏览器空闲时间稍后加载脚本。worker：(实验性) 在 web worker 中加载脚本。
参考 next/script API 参考文档，了解每种策略及其用例的更多信息。
将脚本卸载到 Web Worker（实验性）
警告：
worker策略尚不稳定，目前不适用于 App Router。请谨慎使用。
使用 worker 策略的脚本会被卸载并在带有 Partytown 的 web worker 中执行。这可以通过将主线程专用于应用程序代码的其余部分来提高网站性能。
这种策略仍处于实验阶段，只有在 next.config.js 中启用 nextScriptWorkers 标志时才能使用：
module.exports = {
experimental: {
nextScriptWorkers: true,
},
}然后，运行 next（通常是 npm run dev 或 yarn dev），Next.js 将指导你安装完成设置所需的包：
npm run dev你将看到类似这样的指示：请通过运行 npm install @builder.io/partytown 安装 Partytown
设置完成后，定义 strategy="worker" 将自动在你的应用程序中实例化 Partytown，并将脚本卸载到 web worker。
import Script from 'next/script'
export default function Home() {
return (
<>
<Script src="https://example.com/script.js" strategy="worker" />
</>
)
}在 web worker 中加载第三方脚本时需要考虑一些权衡。请参阅 Partytown 的权衡文档了解更多信息。
内联脚本
Script 组件也支持内联脚本，即不从外部文件加载的脚本。可以通过将 JavaScript 放在大括号内来编写它们：
<Script id="show-banner">
{`document.getElementById('banner').classList.remove('hidden')`}
</Script>或使用 dangerouslySetInnerHTML 属性：
<Script
id="show-banner"
dangerouslySetInnerHTML={{
__html: `document.getElementById('banner').classList.remove('hidden')`,
}}
/>警告：内联脚本必须分配一个
id属性，以便 Next.js 能够跟踪和优化脚本。
执行额外代码
事件处理程序可与 Script 组件一起使用，以在发生某事件后执行额外代码：
onLoad：脚本加载完成后执行代码。onReady：脚本加载完成后和每次组件挂载时执行代码。onError：脚本加载失败时执行代码。
这些处理程序仅在 next/script 导入并在客户端组件内使用时才有效，其中 "use client" 被定义为代码的第一行：
'use client'
import Script from 'next/script'
export default function Page() {
return (
<>
<Script
src="https://example.com/script.js"
onLoad={() => {
console.log('Script has loaded')
}}
/>
</>
)
}参考 next/script API 参考，了解每个事件处理程序的更多信息并查看示例。
其他属性
有许多可以分配给 <script> 元素的 DOM 属性未被 Script 组件使用，如 nonce 或自定义数据属性。包含任何其他属性将自动将其转发到 HTML 中包含的最终优化 <script> 元素。
import Script from 'next/script'
export default function Page() {
return (
<>
<Script
src="https://example.com/script.js"
id="example-script"
nonce="XUENAJFW"
data-test="script"
/>
</>
)
}