下一个js中其他页面的元标题描述

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

我的下一个js是14.0.4。我正在开发 NextJS 的静态站点生成器。在这里，我尝试在不同的页面中设置不同值的元标题。但我这边不再工作了。我的布局、页面、联系方式如下

应用程序/layout.tsx

import type { Metadata } from 'next'
import './globals.css'

export const metadata: Metadata = {
  title: 'My Title'
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
       <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
       
</head>
      <body>  
        {children}  
        </body>
    </html>
  )
}

应用程序/page.tsx

"use client";
export default function Home() {
  return (
    <>    
        <h1>This is my home page</h1>
    </>
  );
}

应用程序/contact.tsx

"use client";
export default function Home() {
  return (
    <>    
        <h1>this is contact page</h1>
    </>
  );
}

在这里，在主页和联系页面中显示元标题“我的标题”，但我想在联系页面中显示不同的元标题。但是，我找不到解决方案。 需要您的小提示。请

nextjs14
1个回答
0
投票

元数据只能在 

page.tsx
或 
layout.tsx
文件中定义。它必须是服务器组件，因此它不能与 
"use client"
指令一起使用。

关于文件结构：

  • ❌
    app/contact.tsx
    （不正确）
  • ✅ 
    app/contact/page.tsx
    （正确 - 路线）
  • ✅ 
    app/components/Contact.tsx
    （正确 - 对于组件）

注意： 对于组件文件，使用 PascalCase 是一种常见约定（例如，

Contact.tsx
或 
Button.tsx
）。

app/page.tsx
的正确代码：

// NO "use client" NEEDED
export const metadata: Metadata = {
  title: 'Home Title',
};

export default function Home() {
  return (
    <>    
      <h1>This is my home page</h1>
    </>
  );
}

参考请参见官方文档：
Next.js 元数据文档

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.