Next.js Script 组件，即 next/script的使用

26 min read

Next.js提供了 next/script 组件来更加方便的管理和加载外部脚本。

它包含了：

  1. 异步加载外部脚本的能力，从而避免阻塞页面渲染。
  2. 脚本的优化，包括 preloading 和 prebrowsing。
  3. 支持内联脚本和外联脚本。
  4. 支持多种异步加载方式，例如async, defer 等。

使用 next/script 组件的例子:

import Script from 'next/script'

function MyComponent() {
  return (
    <>
      <h1>Hello World</h1>
      <Script
        src="https://www.google-analytics.com/analytics.js"
        strategy="afterInteractive"
      />
    </>
  )
}

export default MyComponent

在上面的例子中，我们展示了如何在 Next.js 应用程序中使用 next/script 组件来加载 Google Analytics。

我们可以看到，src 属性指定了要加载的脚本的 URL，并且我们使用 strategy 属性指定了在何时加载脚本。

Next.js 提供了四种策略：

  1. beforeInteractive：在页面的 DOMContentLoaded 事件之前加载。
  2. afterInteractive：在页面的 DOMContentLoaded 事件之后，和其他 async 或 defer 的脚本之前加载。
  3. lazyOnload：在页面的 onload 事件之前加载。
  4. lazy：在页面的 onload 事件之后加载。

这里也可以使用多个 next/script 组件来加载多个脚本。注意，这些组件按照添加的顺序加载。

import Script from 'next/script'

function MyComponent() {
  return (
    <>
      <h1>Hello World</h1>
      <Script
        src="https://www.google-analytics.com/analytics.js"
        strategy="afterInteractive"
      />
      <Script
        src="https://www.google.com/recaptcha/api.js"
        strategy="afterInteractive"
      />
    </>
  )
}

export default MyComponent

总之，使用 next/script 可以方便地管理和加载外部 JavaScript 文件，但也要注意不要过度使用它以保持网站的性能。