layout.tsx 中的元数据导出未在 NextJS 中构建。构建认为这是一个客户端文件,这是不正确的

问题描述 投票:0回答:1

为什么我的 Components/layout.tsx 无法构建?它抱怨正在导出的元数据。该文件未标记为“使用客户端”。

编译失败。

./components/layout.tsx ReactServerComponents错误:

您正在尝试从标记为“使用客户端”的组件导出“元数据”,这是不允许的。删除导出或“使用客户端”指令。了解更多:https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

/Users/arscroggin/code/earhart-app/components/layout.tsx:4:1

const inter = Inter({ subsets: ['latin'] })
 
// export of metadata not working...
export const metadata: Metadata = {
    title: 'MindScout',
    description: 'A Mental Health Platform That Matters More',

这是我的组件/layout.tsx 文件

import { Metadata } from 'next';
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

// export of metadata not working...
export const metadata: Metadata = {
    title: 'MindScout',
    description: 'A Mental Health Platform'
}

export default function Layout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <html lang="en">
            <body className={inter.className}>{children}</body>
        </html>
  )
}

我已按照 NextJS 教程中的步骤设置静态元数据,每个文件都包含 Layout.tsx 文件。我不明白为什么 NextJS 构建过程认为它是客户端文件。

next.js metadata
1个回答
0
投票

您可以将

Metadata
标签直接放入组件中的
<title>
中,而不是
page.js

export default function Page() {
  return (
    <>
      <title>Page title</title>

      <OtherComponents />
    </>
  )
}
© www.soinside.com 2019 - 2024. All rights reserved.