Next.js 14中JSONLD通过IP正常但域名/子域名失效问题排查求助

问题场景 #

在Next.js 14环境下，页面嵌入的JSON-LD出现异常：通过IP地址（如http://xxx.xxx.xxx.xxx/）访问时功能正常，但使用域名/子域名（如http://example.com/）访问时完全失效。用户提供的代码示例如下：

const jsonLd = {
   {
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Location Information",
  "type": "object",
  "properties": {
    "latitude": {
      "type": "number",
      "description": "Latitude coordinate of the location"
    },
    "longitude": {
      "type": "number",
      "description": "Longitude coordinate of the location"
    },
    "address": {
      "type": "string",
      "description": "Street address of the location"
    },
    "city": {
      "type": "string",
      "description": "City of the location"
    },
    "country": {
      "type": "string",
      "description": "Country of the location"
    },
    "postal_code": {
      "type": "string",
      "description": "Postal code of the location"
    }
  },
  "required": ["latitude", "longitude"]
}

<script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      key="product-jsonld"
    />

潜在原因分析 #

• CSP内容安全策略限制：服务器或Next.js配置的CSP规则，可能在域名访问时阻止了application/ld+json类型脚本的执行，而IP访问时未触发该规则。
• 渲染模式差异：Next.js 14的App Router在域名环境下，SSR/SSG的渲染逻辑可能因域名绑定配置不同，导致JSON-LD序列化或注入失败。
• 代码语法错误：示例中jsonLd变量多了一层嵌套大括号，IP访问时浏览器容错机制生效，域名访问时因严格模式或渲染优化触发错误。
• 缓存冲突：CDN或浏览器缓存了域名下的旧页面，其中JSON-LD未正确注入，IP访问走的是全新缓存路径。

遗漏配置排查 #

• Next.js headers配置：检查next.config.js中是否针对域名设置了特殊CSP头，限制了unsafe-inline或application/ld+json类型脚本，IP访问时可能未应用该配置。
• HTTPS/SSL配置：如果域名用HTTPS而IP用HTTP，混合内容策略可能阻止JSON-LD加载（若涉及跨协议资源）。
• 组件渲染规则：在Server Components中直接插入<script>标签不符合Next.js 14规范，域名访问时Server Component渲染逻辑可能拒绝注入脚本。
• 环境变量缺失：域名环境下的环境变量是否完整，是否导致latitude/longitude等必填字段无值，进而生成无效JSON。

故障排查步骤 #

1. 查看浏览器控制台错误：域名访问时打开F12开发者工具，检查Console标签的语法错误、CSP报错，或Network标签的脚本加载失败信息。
2. 修正代码语法错误：把jsonLd定义里多余的大括号去掉，正确代码如下：

const jsonLd = {
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Location Information",
  "type": "object",
  "properties": {
    "latitude": {
      "type": "number",
      "description": "Latitude coordinate of the location"
    },
    "longitude": {
      "type": "number",
      "description": "Longitude coordinate of the location"
    },
    "address": {
      "type": "string",
      "description": "Street address of the location"
    },
    "city": {
      "type": "string",
      "description": "City of the location"
    },
    "country": {
      "type": "string",
      "description": "Country of the location"
    },
    "postal_code": {
      "type": "string",
      "description": "Postal code of the location"
    }
  },
  "required": ["latitude", "longitude"]
};

3. 调整CSP配置：如果域名访问时存在CSP报错，修改next.config.js的headers配置，允许必要的脚本执行：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: "script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; object-src 'none';",
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

4. 规范脚本渲染方式：将JSON-LD脚本移到Client Component中，或使用Next.js官方的next/script组件：

'use client';

import Script from 'next/script';

export default function LocationJsonLd({ latitude, longitude }) {
  const jsonLd = {
    "$schema": "http://json-schema.org/draft-07/schema#",
    "title": "Location Information",
    "type": "object",
    "properties": {
      "latitude": latitude,
      "longitude": longitude,
      "address": "", // 根据实际数据赋值
      "city": "",
      "country": "",
      "postal_code": ""
    },
    "required": ["latitude", "longitude"]
  };

  return (
    <Script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      key="location-jsonld"
    />
  );
}

5. 清除缓存：清空浏览器缓存，或在CDN后台刷新域名下的页面缓存，确保加载最新内容。
6. 验证环境变量：确认域名环境下的环境变量是否正确，保证latitude和longitude有有效值，避免JSON序列化后出现undefined导致无效格式。

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