如何在Next.js 13项目中集成Beamer (app.getbeamer.com)？

核心问题分析 #

直接在 layout.tsx 的 <head> 里写原生脚本会触发 Next.js 13 的 React 组件语法限制，得用框架提供的专用方案加载第三方脚本。

两种可行集成方式 #

方式一：使用 next/script 组件（推荐） #

Next.js 13 官方推荐用 next/script 管理第三方脚本，它会自动处理加载时机，避免语法冲突。

1. 在根 layout.tsx 中导入组件：

import Script from 'next/script'

2. 在布局组件中添加脚本（无需放在 <head> 内，Next.js 会自动处理位置）：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh-CN">
      <head>
        {/* 你的其他头部配置 */}
      </head>
      <body>
        {children}
        {/* 加载并初始化 Beamer */}
        <Script
          id="beamer-script"
          src="https://app.getbeamer.com/js/beamer-embed.js"
          strategy="lazyOnload"
          onLoad={() => {
            // 替换成你的 Beamer 账号密钥
            window.beamer.init({
              key: '你的Beamer账号Key',
              // 可选配置：比如设置组件位置 position: 'right'
            })
          }}
        />
      </body>
    </html>
  )
}

方式二：通过 _document.tsx 注入脚本（App Router 兼容） #

如果项目保留了 _document.tsx 文件，可直接在这里插入原生脚本：

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

export default function Document() {
  return (
    <Html lang="zh-CN">
      <Head>
        <script src="https://app.getbeamer.com/js/beamer-embed.js" async></script>
        <script dangerouslySetInnerHTML={{
          __html: `
            window.beamer = window.beamer || function(){(beamer.q=beamer.q||[]).push(arguments)};
            beamer('init', { key: '你的Beamer账号Key' });
          `
        }} />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

注：必须用 dangerouslySetInnerHTML 插入初始化代码，直接写脚本内容会触发 React 语法错误。

常见问题排查 #

• 组件不显示：检查账号密钥是否正确，查看浏览器控制台报错信息，确认脚本加载时机是否合理（lazyOnload 会在页面加载完成后加载，适合非核心功能）。
• 样式冲突：可在 Beamer 后台自定义组件样式，或通过项目 CSS 优先级覆盖冲突样式。

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