如何将Next.js布局中的Script（next/script）抽离为独立组件？

嘿，这个需求太懂了！谁不想让Root Layout保持清爽干净呢？把重复的VWO脚本逻辑抽成独立组件完全可行，我来给你一步步演示怎么做～

第一步：创建独立的VWO脚本组件 #

我们先在项目里新建一个组件文件，比如 components/VWOScript.tsx，把所有和VWO脚本相关的配置、内容都封装到这里。这样不管是App Router还是Page Router场景，都能直接复用这个组件。

根据你之前的写法，这里给你两种封装方式，选你习惯的就行：

方式一：用原生script标签适配App Router #

如果你更倾向之前在Root Layout里用的原生script写法，组件代码可以这样写：

// components/VWOScript.tsx
const VWOScript = () => {
  // 替换成你实际的VWO脚本内容
  const vwoScriptContent = `
    window._vwo_code = /* 这里是你的VWO核心代码 */;
    // 其他VWO相关逻辑都写在这里
  `;

  return (
    <script
      id="vwoCode"
      type="text/javascript"
      dangerouslySetInnerHTML={{ __html: vwoScriptContent }}
    />
  );
};

export default VWOScript;

方式二：用Next.js的next/script组件（通用适配） #

如果想统一用Next.js官方的next/script组件，组件可以这样写，还能兼容Page Router场景：

// components/VWOScript.tsx
import Script from 'next/script';
import type { ScriptProps } from 'next/script';

// 可选：支持传入自定义策略，适配Page Router的beforeInteractive需求
type VWOScriptProps = Pick<ScriptProps, 'strategy'>;

const VWOScript = ({ strategy }: VWOScriptProps = {}) => {
  const vwoScriptContent = `
    window._vwo_code = /* 这里是你的VWO核心代码 */;
    // 其他VWO相关逻辑都写在这里
  `;

  return (
    <Script
      id="vwoCode"
      type="text/javascript"
      strategy={strategy || 'afterInteractive'}
      dangerouslySetInnerHTML={{ __html: vwoScriptContent }}
    />
  );
};

export default VWOScript;

第二步：在App Router的Root Layout中引入组件 #

现在回到你的layout.tsx，直接导入这个组件就行，Root Layout瞬间变得干净整洁：

// app/layout.tsx
import { PropsWithChildren } from 'react';
import ReactQueryClientProvider from '你的React Query路径';
import VWOScript from '@/components/VWOScript';

const RootLayout = ({ children }: PropsWithChildren) => {
  return (
    <ReactQueryClientProvider>
      <html lang="en">
        <head> 
          {/* 这里只保留你的meta、title等核心head内容 */}
          <VWOScript /> {/* 就这一行，搞定VWO脚本引入！ */}
        </head>
        <body>{children}</body>
      </html>
    </ReactQueryClientProvider>
  );
};

export default RootLayout;

第三步：（可选）让组件兼容Page Router的_app.tsx #

如果你想让Page Router的_app.tsx也复用这个组件，只需要在引入时传入beforeInteractive策略就行，完美适配你之前的需求：

// pages/_app.tsx
import type { AppProps } from 'next/app';
import VWOScript from '@/components/VWOScript';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <VWOScript strategy="beforeInteractive" />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

这样改造后，不管是修改VWO的脚本内容还是调整配置，只需要在VWOScript.tsx里改一次就行，不用在两个地方来回折腾，维护起来超方便！

备注：内容来源于stack exchange，提问作者Julia