如何在NextJS中仅为特定页面在body闭合标签后添加第三方脚本

针对你的需求，有几种简洁可行的方案，既能满足脚本放在<body>内的要求，又能避免全局加载：

方案一：直接在目标页面使用Next.js的<Script>组件（最推荐） #

Next.js提供的next/script组件支持灵活控制脚本的加载时机和位置，完全可以替代你在_document.js中的全局脚本引入，且仅在当前页面加载。

在需要加载脚本的页面组件中添加如下代码：

import Script from 'next/script';

export default function TargetPage() {
  return (
    <div className="page-content">
      {/* 页面自身内容 */}
      
      {/* 按需加载的第三方脚本 */}
      <Script
        src="xxx"
        id="widget"
        strategy="afterInteractive" // 可选策略：afterInteractive/lazyOnload/worker等，按需选择
        // 若需脚本加载后执行自定义逻辑，可添加onLoad回调
        // onLoad={() => console.log('Widget script loaded')}
      />
    </div>
  );
}

• 该组件会自动将脚本插入到<body>内的合适位置，符合你的要求；
• 脚本只会在当前页面渲染时加载，不会影响其他页面；
• 利用Next.js的脚本优化策略，提升加载性能。

方案二：使用自定义布局组件（多页面复用场景） #

如果有多个页面需要加载该脚本，可以封装一个带脚本的布局组件，仅让目标页面使用这个布局：

// components/WidgetLayout.js
import Script from 'next/script';

export default function WidgetLayout({ children }) {
  return (
    <>
      {children}
      <Script
        src="xxx"
        id="widget"
        strategy="afterInteractive"
      />
    </>
  );
}

然后在目标页面中引入该布局：

// pages/target-page.js
import WidgetLayout from '../components/WidgetLayout';

export default function TargetPage() {
  return (
    <WidgetLayout>
      {/* 页面内容 */}
    </WidgetLayout>
  );
}

方案三：在_document.js中按需控制（不推荐，仅作备选） #

如果必须在全局_document.js层面控制，可以通过页面传递标识来判断是否加载脚本，但这种方法会增加复杂度，不如前两种简洁：

首先在目标页面的服务端渲染方法中传递标识：

// pages/target-page.js
export async function getServerSideProps() {
  return {
    props: {
      loadWidget: true,
    },
  };
}

然后修改_document.js，接收页面传递的标识并判断：

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document({ pageProps }) {
  return (
    <Html>
      <Head></Head>
      <body>
        <Main />
        <NextScript />
        {/* 仅当页面传递loadWidget为true时加载脚本 */}
        {pageProps.loadWidget && (
          <script
            src="xxx"
            id="widget"
          />
        )}
      </body>
    </Html>
  );
}

// 重写getInitialProps以传递页面props
Document.getInitialProps = async (ctx) => {
  const initialProps = await Document.getInitialProps(ctx);
  return { ...initialProps, pageProps: ctx.pageProps };
};

总结 #

优先选择方案一，它是Next.js官方推荐的按需加载脚本方式，代码简洁且性能最优；如果有多个页面需要复用脚本，再考虑方案二；方案三仅在特殊场景下使用。

内容的提问来源于stack exchange，提问作者moody1208