Next.js 13.4应用中Title未在head标签内显示的问题

我正在使用Next.js 13.4开发应用，已在metadata中配置title和description，但浏览器中并未显示这些内容。以下是我的RootLayout代码：

"use client";
import Navbar from "@/components/Navbar";
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { ThemeProvider } from "next-themes";
import Footer from "@/components/Footer";

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

export const metadata: Metadata = {
  title: "My title",
  description: "My description",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className="scroll-smooth">
      <body className={inter.className}>
        <ThemeProvider enableSystem={true} attribute="class">
          <Navbar />
          {children}
          <Footer />
        </ThemeProvider>
      </body>
    </html>
  );
}

我原本以为在metadata中配置后会在浏览器显示，请问我是否遗漏了什么？该如何解决？

问题核心是RootLayout 顶部的 "use client" 指令。Next.js 13+ 的 Metadata 是服务器组件专属特性，当你给 RootLayout 添加 "use client" 后，文件会被当作客户端组件处理，其中导出的 metadata 对象会被服务器渲染流程直接忽略，导致浏览器无法读取到配置的标题和描述。

解决步骤如下：

1. 移除 RootLayout 中的 "use client" 指令，让它保持为服务器组件，确保 Next.js 能正确识别并渲染你配置的 Metadata。
2. 单独封装客户端依赖组件：由于 ThemeProvider 需要客户端上下文支持，你需要把它封装成独立的客户端组件，再在 RootLayout 中导入使用。

修改后的代码示例 #

1. 封装客户端版 ThemeProvider 组件（比如 components/ThemeProviderWrapper.tsx）

"use client";
import { ThemeProvider } from "next-themes";

export default function ThemeProviderWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ThemeProvider enableSystem={true} attribute="class">
      {children}
    </ThemeProvider>
  );
}

2. 修改 RootLayout 文件

import Navbar from "@/components/Navbar";
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import ThemeProviderWrapper from "@/components/ThemeProviderWrapper";
import Footer from "@/components/Footer";

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

export const metadata: Metadata = {
  title: "My title",
  description: "My description",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className="scroll-smooth">
      <body className={inter.className}>
        <ThemeProviderWrapper>
          <Navbar />
          {children}
          <Footer />
        </ThemeProviderWrapper>
      </body>
    </html>
  );
}

完成修改后重启开发服务器，浏览器就能正常显示你配置的标题和描述了。

内容的提问来源于stack exchange，提问作者Steevel sharon Salis