NextJS中layout.tsx导出Metadata构建失败，被误判为客户端文件

我在NextJS项目的components/layout.tsx文件里按官方教程配置静态Metadata，结果构建失败，触发了ReactServerComponentsError。错误提示我从标记为'use client'的组件导出metadata，这是不允许的，但我根本没给这个文件加'use client'指令，完全搞不懂为什么构建会把它判定成客户端文件。

错误信息 #

Failed to compile.
./components/layout.tsx
ReactServerComponentsError:
You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

完整代码（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>
  )
}

• 转移Metadata导出位置：App Router规定，静态Metadata只能在app/目录下的路由布局（layout.tsx）或页面（page.tsx）文件中导出，components/目录下的普通组件不支持导出metadata。你需要把export const metadata这段代码移到app/根目录的layout.tsx里。
• 理解隐式客户端标记：你用的next/font/google的Inter字体加载逻辑，会被Next.js自动注入客户端运行的代码，这就导致你的组件被隐式标记为客户端组件，而客户端组件本身就不能导出metadata，这就是冲突的根源。

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