Next.js App Router子布局移除父布局jsonLd script标签报错解决

核心问题分析 #

1. /blog/[searchKeyword]页面同时加载父布局（/blog）和自身的JSON-LD，导致重复
2. 直接通过DOM移除脚本触发removeChild错误：Next.js的Hydration机制要求DOM修改必须通过React渲染流程完成，手动操作DOM会破坏虚拟DOM与真实DOM的一致性
3. next/head无效：App Router已弃用next/head，需直接在组件中渲染<head>内的原生标签

解决方案一：通过布局props控制渲染（推荐） #

在父布局中新增控制参数，子页面通过传入参数决定是否渲染父布局的JSON-LD，完全避免DOM操作。

1. 修改父布局（app/blog/layout.tsx） #

export default function BlogLayout({
  children,
  disableJsonLd = false,
}: {
  children: React.ReactNode;
  disableJsonLd?: boolean;
}) {
  return (
    <>
      {/* 仅当未禁用时渲染父布局的JSON-LD */}
      {!disableJsonLd && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "Blog",
              name: "我的博客",
              description: "分享技术内容的博客",
            }),
          }}
        />
      )}
      {children}
    </>
  );
}

2. 子页面（app/blog/[searchKeyword]/page.tsx）传入禁用参数 #

export default function SearchBlogPage({ params }: { params: { searchKeyword: string } }) {
  return (
    <BlogLayout disableJsonLd={true}>
      {/* 子页面专属的JSON-LD */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "BlogPosting",
            name: `搜索结果：${params.searchKeyword}`,
            description: `关于${params.searchKeyword}的博客内容`,
          }),
        }}
      />
      <div>搜索关键词：{params.searchKeyword}</div>
    </BlogLayout>
  );
}

解决方案二：通过路由路径自动判断 #

如果不想在每个子页面传参，可以将父布局改为客户端组件，通过usePathname判断当前路径，自动控制JSON-LD渲染：

"use client";
import { usePathname } from "next/navigation";

export default function BlogLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  // 判断是否为搜索结果页面
  const isSearchPage = pathname.match(/^\/blog\/[^/]+$/);

  return (
    <>
      {!isSearchPage && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "Blog",
              name: "我的博客",
            }),
          }}
        />
      )}
      {children}
    </>
  );
}

关于next/head无效的说明 #

Next.js App Router已经完全弃用了next/head模块，官方推荐直接在组件中渲染<title>、<meta>、<script>等头部元素，Next.js会自动将这些元素合并到页面的<head>标签中。因此无需再使用next/head的<Head>包裹。

内容的提问来源于stack exchange，提问作者이영찬