Next.js如何在<head>中添加带字面量onload属性的<link>标签？

遇到这种情况太常见了——React的事件系统和原生HTML属性的差异在这里撞了个正着。你想要的是原生HTML的onload属性（以字符串形式存在），但React的TypeScript类型默认只支持驼峰式的onLoad合成事件（要求传入函数），直接写onload会被TypeScript拦截，而且服务端渲染时也不会输出这个属性。下面给你几个简便的解决方案：

方案1：用dangerouslySetInnerHTML直接插入原始HTML #

这是最直接的方法，绕过React的类型检查和事件系统，让服务端直接输出你需要的完整link标签：

import Head from 'next/head';

export default function MyPage() {
  return (
    <>
      <Head>
        {/* 用meta标签作为载体插入link，避免生成额外无用DOM元素 */}
        <meta
          dangerouslySetInnerHTML={{
            __html: '<link href="你的样式文件链接" rel="stylesheet" media="print" onload="this.media=\'all\'" />'
          }}
        />
      </Head>
      {/* 页面内容 */}
    </>
  );
}

这个方法的好处是不用修改任何类型配置，服务端渲染时会完整输出包含onload属性的link标签，完全符合你的需求。需要注意的是，如果链接里有特殊字符（比如单引号），要像示例里那样用转义符处理。

方案2：扩展React的类型定义，允许onload属性 #

如果你不想用dangerouslySetInnerHTML，可以通过扩展TypeScript类型来让React接受小写的onload属性（字符串类型）：

1. 在项目根目录创建一个typings/react.d.ts文件（如果已有类似类型声明文件，直接添加内容即可）：

declare module 'react' {
  interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
    // 添加onload属性，允许字符串类型
    onload?: string;
  }
}

// 确保这个模块被TypeScript识别
export {};

2. 之后你就可以直接在Head组件里写原生的onload属性了，TypeScript不会再抛出错误：

import Head from 'next/head';

export default function MyPage() {
  return (
    <>
      <Head>
        <link
          href="你的样式文件链接"
          rel="stylesheet"
          media="print"
          onload="this.media='all'"
        />
      </Head>
      {/* 页面内容 */}
    </>
  );
}

这个方案更符合React的常规写法，代码也更整洁，服务端同样会正确输出onload属性。唯一的小代价是需要维护这个自定义类型，但这是一次性的配置，后续不会有额外负担。

为什么原来的方法不行？ #

• 用@ts-ignore虽然能绕过类型检查，但React在服务端渲染时不会把小写的onload作为HTML属性输出——它默认只处理驼峰式的事件属性（比如onLoad）。
• 改用onLoad的话，React要求传入一个事件处理函数（比如onLoad={() => {}}），而不是字符串，而且这个函数只会在客户端水化后执行，服务端渲染的HTML里不会出现onload属性，这就导致了你看到的「只有页面hydrate后才会更新media属性」的问题。

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