Next.js 13中添加自定义<head>标签实现Safari固定标签样式

这里给你几个绕开Next.js Metadata类型约束、直接添加自定义<head>标签的实用方案：

方案1：直接在根布局的<head>中插入原生标签 #

在app/layout.tsx的根布局里，直接把需要的<link>标签写进<head>区域就行，完全不用管Metadata的限制：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <head>
        {/* 直接插入Safari固定标签样式 */}
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#325758" />
      </head>
      <body>{children}</body>
    </html>
  );
}

这个方法最简单直接，原生HTML写法，没有任何额外约束。

方案2：用类型断言绕过Metadata的类型检查 #

如果你还是想通过Metadata来管理，可以用TypeScript的类型断言，强制让自定义属性通过类型校验：

import type { Metadata } from 'next';

export const metadata: Metadata = {
  links: [
    {
      rel: 'mask-icon',
      href: '/safari-pinned-tab.svg',
      color: '#325758',
    } as unknown as Metadata['links'][number],
  ],
};

通过as unknown as ...把自定义的color属性包装成Metadata允许的类型，既能用Metadata统一管理，又能添加需要的自定义属性。

方案3：使用next/head组件（兼容旧写法） #

虽然Next.js 13 App Router推荐用Metadata，但你也可以继续用next/head组件快速添加标签：

import Head from 'next/head';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <Head>
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#325758" />
      </Head>
      <body>{children}</body>
    </html>
  );
}

这个方法适合习惯了Pages Router写法的开发者，同样能直接添加自定义标签。

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