文章目录一、为什么不能直接用 script1️⃣ 阻塞页面渲染2️⃣ 执行时机不可控3️⃣ 无法被 Next.js 优化二、什么是 next/script三、基本引入 vs 全局引入非常容易混淆3.1 什么是「基本引入」页面级 / 组件级3.2 什么是「全局引入」应用级四、Script 的加载策略4.1 afterInteractive默认 首选4.2 lazyOnload性能最优4.3 beforeInteractive慎用4.4 worker实验特性四、内联 Script 的写法方式一dangerouslySetInnerHTML方式二children推荐在 Next.js 中next/script是一个经常被忽略、但在性能和工程质量上非常关键的组件。它专门用于安全、可控、性能友好地加载第三方脚本如统计、监控、广告、SDK 等。一、为什么不能直接用script在传统HTML中我们习惯这样写scriptsrchttps://example.com/sdk.js/script但在Next.js尤其是 App Router / SSR 场景中这种写法存在明显问题1️⃣ 阻塞页面渲染默认 script 会阻塞 HTML 解析影响首屏性能FCP / LCP2️⃣ 执行时机不可控SSR / Hydration 阶段容易出现window is not defined客户端、服务端不一致3️⃣ 无法被 Next.js 优化无法参与 Script 调度无法延迟 / 优先级控制Next.js Script 的存在本质就是为了解决这些问题。二、什么是next/scriptimportScriptfromnext/script;Script是 Next.js 提供的一个高级 Script 管理组件具备✅ 不阻塞渲染✅ 精准控制加载与执行时机✅ SSR / CSR 安全✅ 自动去重✅ 性能优化preload / defer三、基本引入 vs 全局引入非常容易混淆在使用next/script时很多人其实不是不会用 strategy而是没想清楚脚本应该“在哪引入”。我们先把这个问题讲清楚再进入 strategy。3.1 什么是「基本引入」页面级 / 组件级只在某一个页面或组件中使用 Script。示例仅在详情页引入// app/detail/page.tsximportScriptfromnext/script;exportdefaultfunctionDetailPage(){return(Script srchttps://example.com/detail-sdk.jsstrategyafterInteractive/divDetail Page/div/);}特点✅只在该页面加载✅ 页面卸载后不再使用逻辑上❌ 切换页面可能重新执行适合场景只在某个页面用到的 SDK页面级功能编辑器、地图、播放器不希望污染全局的脚本3.2 什么是「全局引入」应用级在应用根节点引入一次加载全站可用。App Router推荐方式// app/layout.tsximportScriptfromnext/script;exportdefaultfunctionRootLayout({children}){return(htmlbody{children}Script srchttps://example.com/global-sdk.jsstrategyafterInteractive//body/html);}特点✅全站只加载一次自动去重✅ 所有页面都能使用window.xxx❌ 会增加全站的 JS 成本适合场景埋点 / 监控GA、神策、Sentry登录态相关 SDK全局基础能力四、Script 的加载策略90% 的脚本用afterInteractive不影响首屏的用lazyOnload极少数基础脚本才用beforeInteractive4.1afterInteractive默认 首选Script srchttps://example.com/sdk.js /页面可交互后加载不阻塞渲染行为最可控✅埋点 / 监控 / 业务 SDK 首选4.2lazyOnload性能最优Script srchttps://example.com/chat.js strategylazyOnload /页面完全加载后再执行对首屏几乎 0 影响✅广告 / 客服 / 非关键功能4.3beforeInteractive慎用Script srchttps://example.com/polyfill.js strategybeforeInteractive /React 执行前加载可能影响首屏性能⚠️只有当脚本“必须最早存在”时才用4.4worker实验特性Script srchttps://example.com/heavy.js strategyworker /暂时不建议使用。四、内联 Script 的写法方式一dangerouslySetInnerHTMLScript idga-initstrategyafterInteractivedangerouslySetInnerHTML{{__html:window.dataLayer window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag(js, new Date());}}/⚠️ 必须提供唯一 id否则Next.js会报错方式二children推荐Script idinit strategyafterInteractive {console.log(script loaded)} /Script 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目