NextJS动态引入Script

NextJS15动态引入Script

在nextJS中，动态引入脚本👣一般通过官方提供的 next/script 方法进行动态引入，接下来通过举例说明。script传送门

使用方法

import Script from 'next/script'
 
export default function Dashboard() {
  return (
    <>
      <Script src="https://example.com/script.js" />
    </>
  )
}

配置项

Prop	Example	Type	Required
src	src="http://example.com/script"	String	Required unless inline script is used
strategy	strategy="lazyOnload"	String	-
onLoad	onLoad={onLoadFunc}	Function	-
onReady	onReady={onReadyFunc}	Function	-
onError	onError={onErrorFunc}	Function	-

strategy 属性

1，beforeInteractive

• 脚本会在页面交互前加载。
• 适用于对页面初始化至关重要的脚本，例如 Polyfill。

2，afterInteractive

• 脚本会在页面加载完成后立即加载。
• 适用于分析工具或非阻塞交互的功能。

3，lazyOnload

• 脚本会在页面完全加载后（window.onload 事件触发后）加载。
• 适用于低优先级的非关键脚本。

4，worker

• worker策略还不稳定，也不适用于App Router。小心使用。
• 适用于脚本中使用worker，需要在next.config.ts中开启 experimental: { nextScriptWorkers: true } 选项

自定义脚本内容

next/script 支持直接嵌入脚本内容，通过 children 属性定义。

<Script id="inline-script">
  {`
    console.log('Hello, Next.js!');
  `}
</Script>