Next.js 13（App目录+TS）如何在各页面服务端添加自定义JSON脚本标签？

核心思路 #

借助App目录的布局嵌套特性，在根布局（app/layout.tsx）中插入服务端渲染的script标签，所有子路由页面会自动继承该脚本；若需页面级自定义，可通过嵌套布局或元数据扩展实现。

具体实现 #

1. 全局统一Schema（适用于所有页面） #

步骤1：定义Schema数据

在项目中创建app/schema.ts文件，存放站点通用的Schema结构：

export const globalSchema = {
  "@context": "https://schema.org",
  "@type": "Thing",
  "name": "你的站点名称",
  "description": "你的站点核心描述"
  // 补充其他Schema字段
};

步骤2：在根布局中注入脚本

修改app/layout.tsx，在head区域添加内联script标签，通过dangerouslySetInnerHTML将Schema对象转为JSON字符串：

import type { Metadata } from 'next';
import { globalSchema } from './schema';

export const metadata: Metadata = {
  // 你的站点基础元数据（如title、description）
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <head>
        {/* 其他头部资源（如样式、 favicon） */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(globalSchema) }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

2. 页面级自定义Schema（可选） #

如果需要给特定页面设置不同的Schema，可通过嵌套布局实现：

步骤1：在目标页面目录创建布局文件

比如给about页面自定义Schema，新建app/about/layout.tsx：

// 定义当前页面的Schema
const aboutSchema = {
  "@context": "https://schema.org",
  "@type": "AboutPage",
  "name": "关于我们",
  "description": "品牌故事与团队介绍"
};

export default function AboutLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(aboutSchema) }}
        />
      </head>
      {children}
    </>
  );
}

步骤2：页面组件正常编写

app/about/page.tsx无需额外修改，直接渲染页面内容即可：

export default function AboutPage() {
  return <div>关于我们页面内容</div>;
}

关键注意点 #

• dangerouslySetInnerHTML是Next.js服务端渲染内联脚本的标准方式，确保Schema在服务端生成并直接输出到HTML，符合需求。
• 根布局的head内容会被所有子路由继承，全局Schema放在这里即可覆盖所有页面；嵌套布局的head会补充或替换根布局的对应内容。
• 此方案完全在服务端/构建时生成脚本，无需客户端加载，满足SEO需求。

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