Next.js中meta标签使用media属性报错 如何实现深浅色主题色配置

这个TypeScript报错的根本原因是React默认的MetaHTMLAttributes类型定义未包含media属性，属于类型校验问题，不影响原生功能的实际运行。分两种常用场景给出正确实现方案：

方案1：Next.js 13+ App Router（推荐） #

直接通过内置的元数据配置实现，无需手动编写meta标签，原生支持类型校验：
在根路由的layout.tsx中导出metadata对象，配置themeColor字段即可：

// app/layout.tsx
export const metadata = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", content: "white" },
    { media: "(prefers-color-scheme: dark)", content: "black" },
  ],
};

Next.js会自动生成对应带media属性的meta标签，无TS报错。

方案2：Pages Router / 手动编写meta标签场景 #

如果是旧版本Pages Router，或者需要手动控制meta标签插入位置，可以通过扩展React类型解决报错：

1. 首先在项目根目录的types.d.ts（没有就新建）中添加类型扩展：

import "react";

declare module "react" {
  interface MetaHTMLAttributes<T> extends HTMLAttributes<T> {
    media?: string;
  }
}

2. 确保tsconfig.json的include数组包含该类型文件，之后在next/head的Head组件中正常编写meta标签即可：

import Head from "next/head";

export default function Home() {
  return (
    <>
      <Head>
        <meta name="theme-color" media="(prefers-color-scheme: light)" content="white" />
        <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
      </Head>
      {/* 页面其余内容 */}
    </>
  );
}

如果不想扩展全局类型，也可以临时用// @ts-ignore忽略当前行的TS校验，不推荐长期使用。

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