Next.js 13 Script标签无法在指定位置渲染问题求助

核心原因 #

• Convertkit默认嵌入脚本的渲染逻辑：官方提供的脚本默认会将表单元素直接追加到document.body末尾，而非插入到你放置<Script>标签的父容器内，这是脱离指定位置的根本原因。
• Next.js Script组件的加载特性：使用async模式时，脚本执行时机可能早于目标父容器完成渲染，且Script组件本身不会自动将脚本生成的内容绑定到当前组件的DOM节点。

解决方法 #

方法一：指定表单渲染目标容器 #

Convertkit支持通过属性指定渲染容器，步骤如下：

1. 给父容器添加唯一ID：

   <div id="convertkit-form-container" className="flex flex-row space-x-4"></div>
   

2. 修改<Script>组件，添加data-target属性指向该ID：

   <Script
     async
     data-uid="PROJECT_ID"
     data-target="#convertkit-form-container"
     src="https://MYPROJECT.ck.page/PROJECT_ID/index.js"
   />
   

   此配置会让脚本将表单插入到指定容器内，而非body末尾。

方法二：手动初始化表单（更灵活） #

若方法一不生效，可手动调用Convertkit初始化函数精准控制渲染：

1. 调整Script组件加载策略并添加加载回调：

   <Script
     id="convertkit-script"
     strategy="lazyOnload"
     src="https://MYPROJECT.ck.page/PROJECT_ID/index.js"
     onLoad={() => {
       // 脚本加载完成后手动绑定到目标容器
       window.convertkitForms?.embed({
         formId: 'YOUR_FORM_ID', // 替换为你的表单ID
         container: document.getElementById('convertkit-form-container')
       });
     }}
   />
   

2. 配合useRef和useEffect确保目标容器已挂载到DOM（避免初始化时容器不存在）：

   import { useRef, useEffect } from 'react';
   
   export default function AboutPage() {
     const formContainerRef = useRef(null);
   
     useEffect(() => {
       if (formContainerRef.current && window.convertkitForms) {
         window.convertkitForms.embed({
           formId: 'YOUR_FORM_ID',
           container: formContainerRef.current
         });
       }
     }, []);
   
     return (
       <div ref={formContainerRef} className="flex flex-row space-x-4"></div>
     );
   }
   

额外注意事项 #

• 清理无效DOM标签：原代码中存在多余的闭合</div>，会导致DOM结构混乱，先删除无效标签确保父容器结构正确。
• 避免全局渲染：确保<Script>组件仅在About页面内渲染，不要放在_app.js或全局布局组件中，防止表单出现在所有页面。

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