NextJS中文文档 - Scripts

应用程序脚本

当访问应用程序中的任何路由时，此脚本将加载并执行。Next.js 将确保脚本仅加载一次，即使用户在多个页面之间导航。

建议：我们建议仅在特定页面或布局中包含第三方脚本，以最小化对性能的不必要影响。

策略

虽然 next/script 的默认行为允许你在任何页面或布局中加载第三方脚本，但你可以通过使用 strategy 属性来微调其加载行为：

• beforeInteractive：在任何 Next.js 代码之前和在任何页面水合发生之前加载脚本。
• afterInteractive：（默认）在页面上发生一些水合后提前加载脚本。
• lazyOnload：在浏览器空闲时间晚些时候加载脚本。
• worker：（实验性）在 Web Worker 中加载脚本。

参考 next/script API 参考文档了解更多关于每种策略及其用例的信息。

将脚本卸载到 Web Work/nextjs-cn/

警告： 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" />
    </>
  )
}

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：在脚本加载失败时执行代码。

附加属性

有许多 DOM 属性可以分配给 <script> 元素，而不是由 Script 组件使用，如 nonce 或自定义数据属性。包含任何附加属性将自动将其转发到 HTML 中包含的最终优化的 <script> 元素。