Next.js代码含撇号时构建失败部署到Firebase如何解决

数据老陈

2026-10-5

Next.js 部署Firebase时含撇号代码构建失败解决方案

问题本质

构建过程中（尤其是Firebase部署环节的静态文件转义流程），JSX文本内未做处理的撇号会被误识别为JavaScript字符串边界，触发语法解析错误，导致构建中断。

可用解决方法

方案1：使用HTML实体替换撇号
将撇号替换为HTML原生转义实体'，完全规避解析冲突，适配所有渲染场景：

<tagline>Let&apos;s be Filmy</tagline>

方案2：将带撇号的文本包裹为JSX字符串表达式
用大括号包裹文本，外层使用双引号或反引号包裹字符串，避免和内部单引号冲突：

// 双引号包裹版本
<tagline>{"Let's be Filmy"}</tagline>
// 反引号包裹版本
<tagline>{`Let's be Filmy`}</tagline>

方案3：转义JavaScript字符串中的撇号
如果文本存放在JS变量中，直接在撇号前加反斜杠转义即可：

const taglineText = 'Let\'s be Filmy'

export default function Home() {
  return (
    <div className={styles.container}>
      <title>Filmydom</title>
      <h1>Filmydom</h1>
      <tagline>{taglineText}</tagline>
      <br />
      <br />
      <h3>Coming Soon</h3>
    </div>
  )
}