Next.js中无法正常渲染LinkedIn关注按钮脚本问题求助

该问题本质是 Next.js 单页应用的渲染特性与第三方脚本初始化逻辑冲突导致：LinkedIn 官方脚本仅会在首次页面加载时自动扫描页面 DOM 生成关注按钮，当页面交互触发组件重渲染、路由切换时，原有生成的按钮 DOM 被销毁，脚本不会自动重新执行初始化逻辑，因此按钮消失。

1. 全局引入 LinkedIn 基础脚本 #

全局仅引入一次 LinkedIn 基础脚本，避免重复加载出现冲突，根据你使用的 Next.js 路由模式选择对应写法：

App Router 写法（app目录） #

在根布局文件 app/layout.js 中引入 next/script 加载脚本：

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script 
        src="https://platform.linkedin.com/in.js" 
        type="text/javascript"
        strategy="lazyOnload"
      >
        lang: en_US
      </Script>
    </html>
  )
}

Pages Router 写法（pages目录） #

在自定义文档 pages/_document.js 中引入脚本即可。

2. 封装可自动重新初始化的关注按钮组件 #

单独封装按钮组件，通过 useEffect 监听组件挂载、路由变化等时机，手动调用 LinkedIn 暴露的 IN.parse() 方法重新渲染按钮：

'use client' // App Router 需添加该行标记为客户端组件，Pages Router 无需
import { useEffect, useRef } from 'react'
import { usePathname } from 'next/navigation' // App Router 用该行，Pages Router 替换为 import { useRouter } from 'next/router'

const LinkedInFollowButton = () => {
  const buttonContainerRef = useRef(null)
  const currentPath = usePathname() // App Router 用该行，Pages Router 替换为 const { asPath: currentPath } = useRouter()

  useEffect(() => {
    const initLinkedInButton = () => {
      // 检查LinkedIn脚本是否加载完成
      if (window.IN) {
        // 仅解析当前容器内的LinkedIn组件，避免全页扫描影响性能
        window.IN.parse(buttonContainerRef.current)
      }
    }

    if (!window.IN) {
      // 脚本未加载完成时，监听加载事件后再初始化
      const linkedInScript = document.querySelector('script[src="https://platform.linkedin.com/in.js"]')
      if (linkedInScript) {
        linkedInScript.addEventListener('load', initLinkedInButton)
        return () => linkedInScript.removeEventListener('load', initLinkedInButton)
      }
    } else {
      initLinkedInButton()
    }
  }, [currentPath]) // 路由变化时自动重新初始化按钮

  return (
    <div ref={buttonContainerRef}>
      <script type="IN/FollowCompany" data-id="76160368" data-counter="bottom"></script>
    </div>
  )
}

export default LinkedInFollowButton

3. 页头引入组件 #

直接在你的页头组件中引入上述封装好的 LinkedInFollowButton 组件即可，无需额外配置。

• 不要在业务组件内重复引入 LinkedIn 基础脚本，全局仅加载一次即可
• 如果按钮所在的容器有频繁的状态更新导致重渲染，可使用 React.memo 包裹按钮组件减少不必要的初始化执行
• 若无需路由变化时刷新按钮，可删除 useEffect 依赖项中的 currentPath，仅保留空数组即可

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