Next.js Head忽略重复Meta标签求助：多media主题色标签仅渲染最后一个

Next.js的next/head组件会自动去重拥有相同name属性的meta标签，所以你编写的两个theme-color标签最终只会保留最后一个。无需JavaScript逻辑的话，可以用以下两种方案解决：

方案1：直接修改自定义_document.js/_document.tsx #

绕过next/head的自动去重机制，在服务端渲染的根文档<head>中手动添加这两个meta标签。_document作为页面的根模板，不会触发next/head的去重逻辑。

示例代码：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta name="theme-color" media="(prefers-color-scheme: light)" content="#7f8fa6"/>
          <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#141414" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

方案2：给meta标签添加唯一key属性 #

next/head允许通过设置唯一的key属性，避免相同name的标签被去重，只要两个标签的key值不重复即可。

示例代码：

import Head from 'next/head';

function MyPage() {
  return (
    <>
      <Head>
        <meta 
          key="theme-color-light"
          name="theme-color" 
          media="(prefers-color-scheme: light)" 
          content="#7f8fa6"
        />
        <meta 
          key="theme-color-dark"
          name="theme-color" 
          media="(prefers-color-scheme: dark)" 
          content="#141414" 
        />
      </Head>
      {/* 页面内容 */}
    </>
  );
}

export default MyPage;

这两种方案都依赖Next.js的内置机制，不需要额外编写交互逻辑。

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