Next.js中Head标签渲染Schema出现转义字符问题求助

出现"这类转义字符，是因为Next.js默认会对插入到HTML中的字符串进行HTML实体转义，破坏了JSON格式结构。以下是针对不同路由模式的解决方案：

Pages Router 方案 #

使用next/head组件配合dangerouslySetInnerHTML直接插入原始JSON内容，避免转义：

正确的Schema组件代码 #

import Head from 'next/head';

export default function Schema({ schemaData }) {
  return (
    <Head>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
      />
    </Head>
  );
}

组件调用示例 #

<Schema 
  schemaData={{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "你的文章标题",
    "description": "文章描述内容"
  }} 
/>

App Router 方案 #

可以使用next/script组件或直接在head标签内使用dangerouslySetInnerHTML：

示例代码 #

import Script from 'next/script';

export default function Page() {
  const schemaData = {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "App Router下的文章标题",
    "description": "App Router模式的示例描述"
  };

  return (
    <>
      <Script
        id="schema-markup"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
      />
    </>
  );
}

关键说明 #

• 不要直接将JSON字符串作为文本插入script标签，否则Next.js会自动转义双引号等特殊字符，导致JSON结构失效。
• 使用JSON.stringify将JavaScript对象转换为合法的JSON字符串，再通过dangerouslySetInnerHTML插入，确保输出的JSON格式正确无转义。

内容的提问来源于stack exchange，提问作者S.M_Emamian