Next.js - Script 组件

Next.js 中的 <Script> 组件类似于 HTML 中的 <script> 标签，它可用于在页面中引入外部脚本。本章将介绍 Next.js 中的 <Script> 组件、它的 props，以及如何使用它在页面中引入外部脚本。

Next.js 中的 Script 组件

Next.js 中的 <Script> 组件用于在页面中引入外部脚本。它类似于 HTML 中的 <script> 标签。<Script> 组件用于引入外部 JavaScript 文件，可以用于从 CDN、第三方库或其他任何外部源引入脚本。

语法

以下代码展示了 Next.js 中 <Script> 组件的基本用法语法。

import Script from 'next/script' // 导入库

export default function Home() {
    return (
        <div>
            <h2>Hello, Next.js!</h2>
            <Script src="link/to/script.js">
            </Script>
        </div>
    );
}

Script 组件的 Props

以下 props 可以传递给 <Script> 组件：

Script 组件的 src Prop

src prop 用于提供要包含在页面中的外部脚本文件的 URL。这可以是绝对外部 URL 或内部路径。除非使用内联脚本，否则 src 属性是必需的。以下代码展示了在 <Script> 标签中使用 src prop 的用法。

// 导入库
import Script from 'next/script'

// 引入外部脚本
export default function Page() {
    return (
        // 引入外部脚本
        <Script src="link/to/script.js">
        </Script>
    );
}

Script 组件的 strategy Prop

strategy prop 用于定义脚本的加载策略。strategy prop 可以有以下值：

• afterInteractive：页面渲染完成并变得可交互后加载脚本。
• lazyOnload：页面加载完成后延迟加载脚本。
• beforeInteractive：页面开始渲染前加载脚本。
• worker：将脚本作为 Web Worker 加载。

strategy prop 的默认值是 afterInteractive。以下代码展示了在 <Script> 标签中使用 strategy prop 的用法。

// 导入库
import Script from 'next/script'

// 使用 strategy 引入外部脚本
export default function Page() {
    return (
        // 使用 strategy 引入外部脚本
        <Script src="link/to/script.js" strategy="lazyOnload">
        </Script>
    );
}

Script 组件的 onLoad Prop

onLoad prop 用于定义一个回调函数，当脚本加载完成时该函数将被调用。onLoad prop 是可选的。以下代码展示了在 <Script> 标签中使用 onLoad prop 的用法。

// Import the library
import Script from 'next/script'

// Include external script with onLoad
export default function Page() {
    return (
        // Include external script with onLoad
        <Script src="link/to/script.js" 
            onLoad={() => console.log('Script loaded successfully')}>
        </Script>
    );
}

Script 组件的 onError Prop

onError prop 用于定义一个回调函数，当脚本加载失败时该函数将被调用。onError prop 是可选的。以下代码展示了在 <Script> 标签中使用 onError prop 的用法。

// Import the library
import Script from 'next/script'

// Include external script with onError
export default function Page() {
    return (
        // Include external script with onError
        <Script src="link/to/script.js" 
            onError={() => console.log('Script failed to load')}>
        </Script>
    );
}

Script 组件的 onReady Prop

onReady prop 用于定义一个回调函数，当脚本准备好执行时该函数将被调用。onReady prop 是可选的。

注意： onReady 目前尚不支持 Server Components，只能用于 Client Components。

以下代码展示了在 <Script> 标签中使用 onReady prop 的用法。

// Import the library
import Script from 'next/script'

// Include external script with onReady

export default function Page() {
    return (
        // Include external script with onReady
        <Script src="link/to/script.js" 
            onReady={() => console.log('Script is ready')}>
        </Script>
    );
}