在我的 nextjs Web 应用程序中，我需要通过“使用客户端”使我的主布局.tsx 文件成为客户端组件，因此我必须删除元数据对象的导出以使应用程序继续工作，但我需要并且想要我的主页将像元数据一样在选项卡上填充其标题，但正如您所知，这在客户端组件中是不可能的，所以我的问题是：如何在主布局文件中没有元数据的情况下向主页添加标题for 需求已成为客户端组件？
我没有找到通过客户端组件设置元数据的解决方案。但是，您可以将客户端从 layout.tsx 分离到单独的组件中，如下例所示。
布局.tsx
import { Metadata } from 'next'
import Client from './Client'
export const metadata: Metadata = {
title: 'Foo'
};
export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<html lang='en'>
<body>
<Client>
{children}
</Client>
</body>
</html>
)
}
客户端.tsx
'use client'
export default function Client({
children
}: {
children: React.ReactNode
}) {
return (
<div>
{children}
</div>
)
}
从同一路由中的多个段导出的元数据对象会浅层合并在一起，形成路由的最终元数据输出。重复的密钥将根据其顺序进行替换。
应用程序/layout.js
export const metadata = {
title: 'Acme',
openGraph: {
title: 'Acme',
description: 'Acme is a...',
},
}
应用程序/page.js
export const metadata = {
title: 'Home',
openGraph: {
title: 'Home',
},
}
输出元数据：app/page.js
// <title>Home</title>
// <meta property="og:title" content="Home" />
您可以在此处查看文档中的解决方案