NextJS14 服务端组件中添加带class属性的自定义元标签（适配Elastic）

嘿，这个问题我之前也折腾过，Next.js默认的Metadata API确实没法直接给meta标签加class属性，尤其是还要求用服务端组件不能转客户端的情况，不过有两个简单靠谱的解决方案：

方法一：直接在服务端组件中手动渲染meta标签 #

服务端组件本身就支持直接输出原生HTML元素，完全可以跳过Next.js的Metadata API，直接写你需要的带class的meta标签，这是最直接的方式：

export default function MyServerComponent() {
  return (
    <>
      {/* 直接添加适配Elastic的meta标签 */}
      <meta class="elastic" name="FIELD_NAME_1" content="FIELD_VALUE_1" />
      <meta class="elastic" name="FIELD_NAME_2" content="FIELD_VALUE_2" />
      
      {/* 你的页面其他内容 */}
      <main>
        <h1>这是我的服务端组件页面</h1>
      </main>
    </>
  );
}

这种方式完全符合服务端组件的要求，不需要任何额外配置，Elastic也能正常识别带有elastic类的meta标签。

方法二：在根服务端Layout中全局添加 #

如果这些适配Elastic的meta标签是所有页面都需要的，直接在根layout.tsx（服务端组件）的<head>里手动添加即可，这样所有页面都会自动带上这些标签：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        {/* 全局添加Elastic所需的meta标签 */}
        <meta class="elastic" name="site_name" content="我的网站" />
        <meta class="elastic" name="page_title" content="首页" />
      </head>
      <body>{children}</body>
    </html>
  );
}

为什么默认的Metadata API不行？因为Next.js的Metadata API是一个抽象层，只允许设置它预定义支持的属性（比如name、content、charset这些），像class这种自定义属性不在支持列表里，所以必须用原生HTML元素的方式来实现。

备注：内容来源于stack exchange，提问作者Igor Zinchenko