Next.js 14集成OneTrust路由块被拦截问题求助

可以通过修改Next.js的Webpack配置，自动给所有Webpack生成的脚本块添加data-ot-ignore属性，绕过OneTrust的拦截。以下是具体实现方案：

全局Webpack配置方案 #

在项目根目录的next.config.js中添加Webpack自定义配置，重写脚本标签的生成逻辑：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    // 仅处理客户端打包产物
    if (!isServer) {
      // 重写script标签模板，注入data-ot-ignore属性
      const originalScriptTagTemplate = config.output.scriptTagTemplate;
      config.output.scriptTagTemplate = (url, attributes) => {
        // 给所有自动生成的脚本标签添加忽略标记
        attributes['data-ot-ignore'] = '';
        return originalScriptTagTemplate(url, attributes);
      };
    }
    return config;
  },
};

module.exports = nextConfig;

工作原理 #

Webpack的scriptTagTemplate负责生成加载路由chunk的脚本标签，通过覆盖这个模板函数，我们可以在所有Webpack自动生成的脚本标签上强制添加data-ot-ignore属性，让OneTrust跳过对这些脚本的类型修改。

局部备选方案 #

如果不需要全局配置，也可以对特定路由的脚本手动使用next/script组件标记：

import Script from 'next/script';

export default function YourPage() {
  return (
    <>
      <Script
        src="/path/to/your/script.js"
        data-ot-ignore=""
        strategy="lazyOnload"
      />
      {/* 页面其他内容 */}
    </>
  );
}

这个方案适合只需要忽略特定脚本的场景，但需要逐个处理路由组件。

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