NextJS 14.0.4静态站点多页面Meta Title自定义失效求助

问题原因 #

根布局layout.tsx中定义的metadata是全局默认配置，当子页面未声明自己的metadata时，会直接继承根布局的标题。要实现页面独立标题，需要在每个页面文件中单独导出专属的Metadata配置。

具体修改步骤 #

1. 优化根布局（可选，实现标题模板） #

如果希望所有页面标题统一后缀，可将根布局的metadata改为模板形式，子页面标题会自动填充模板占位符：

// app/layout.tsx
import type { Metadata } from 'next';
import './globals.css';

export const metadata: Metadata = {
  title: {
    default: 'My Title', // 默认标题（当子页面未设置时使用）
    template: '%s | My Site' // 模板，%s会被子页面标题替换
  },
};

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>
  );
}

2. 为首页设置独立标题 #

在app/page.tsx中导出专属metadata：

// app/page.tsx
"use client";
import type { Metadata } from 'next';

// 导出首页专属标题
export const metadata: Metadata = {
  title: 'Home Page'
};

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

3. 为联系页设置独立标题 #

修正组件名并导出专属metadata：

// app/contact.tsx
"use client";
import type { Metadata } from 'next';

// 导出联系页专属标题
export const metadata: Metadata = {
  title: 'Contact Us'
};

// 修正组件名（原代码写为Home，规范命名为Contact）
export default function Contact() {
  return (
    <>    
      <h1>This is the contact page</h1>
    </>
  );
}

注意事项 #

• 即使页面是客户端组件（"use client"），依然可以导出metadata，Next.js会自动处理服务器端渲染的元数据。
• 如果不需要标题模板，可直接在根布局中只设置default，子页面的metadata会完全覆盖根布局的标题。

内容的提问来源于stack exchange，提问作者Devil Themes