Next.js声明全局变量时出现Unexpected token '&'报错如何解决？

报错根因 #

这个报错和JSON.stringify无关，是JSX的默认转义机制导致的：你在Next.js的Head组件内把<script>标签套在了JSX的花括号{}中，React会自动对花括号内的所有内容做HTML实体转义，代码里的<、"、>会被转成<、"、>这类字符，浏览器解析脚本时识别不了转义后的内容，就会抛出Unexpected token '&'错误。

正确实现方案 #

要实现全局变量注入，可选用以下两种合法写法：

• 写法1：直接在Head内写script标签，不需要额外包裹花括号，适合静态变量场景：

import Head from 'next/head'

export default function Index() {
  return (
    <>
      <Head>
        <script type="text/javascript">
          var s_pageName2 = 'abc:en-us:/lo-form'
        </script>
      </Head>
      {/* 页面其他内容 */}
    </>
  )
}

• 写法2：使用dangerouslySetInnerHTML注入，适合变量值为动态生成的场景，可完全避免转义问题：

import Head from 'next/head'

export default function Index() {
  // 可替换为动态生成的变量值
  const pageVal = 'abc:en-us:/lo-form'
  return (
    <>
      <Head>
        <script
          type="text/javascript"
          dangerouslySetInnerHTML={{
            __html: `var s_pageName2 = ${JSON.stringify(pageVal)}`
          }}
        />
      </Head>
      {/* 页面其他内容 */}
    </>
  )
}

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