Next.js App目录中如何在组件内访问页面元数据？

方案1：通过Layout传递Props（推荐） #

你的layout.tsx属于Server Component，可以直接复用获取标题的逻辑，再将标题作为props传递给客户端组件Header：

1. 修改layout.tsx：

import Header from './Header';
import getDictionary from '[你的getDictionary路径]';
import type { Locale } from '[你的Locale类型路径]';

export default async function RootLayout({
  children,
  params: { lang },
}: {
  children: React.ReactNode;
  params: { lang: Locale };
}) {
  const dictionary = await getDictionary(lang);
  const pageTitle = dictionary.pages.home.title; // 和page.tsx保持一致的逻辑

  return (
    <html lang={lang}>
      <body>
        <Header title={pageTitle} />
        {children}
      </body>
    </html>
  );
}

2. 更新Header.tsx接收props：

'use client';

type HeaderProps = {
  title: string;
};

export default function Header({ title }: HeaderProps) {
  return (
    <p>{title}</p>
  );
}

方案2：在客户端组件中直接获取标题 #

如果getDictionary可以在客户端运行（比如仅导入静态JSON文件），可以在Header中用useParams拿到语言参数，再调用方法获取标题：

'use client';
import { useParams } from 'next/navigation';
import getDictionary from '[你的getDictionary路径]';
import type { Locale } from '[你的Locale类型路径]';
import { useEffect, useState } from 'react';

export default function Header() {
  const { lang } = useParams() as { lang: Locale };
  const [title, setTitle] = useState('');

  useEffect(() => {
    const fetchTitle = async () => {
      const dictionary = await getDictionary(lang);
      setTitle(dictionary.pages.home.title);
    };
    fetchTitle();
  }, [lang]);

  return <p>{title}</p>;
}

方案3：使用React Context共享标题 #

如果需要在多个组件中复用标题，可以通过Context传递：

1. 创建TitleContext.tsx：

'use client';
import { createContext, useContext } from 'react';

const TitleContext = createContext<string>('');

export function TitleProvider({ children, title }: { children: React.ReactNode; title: string }) {
  return (
    <TitleContext.Provider value={title}>
      {children}
    </TitleContext.Provider>
  );
}

export function useTitle() {
  return useContext(TitleContext);
}

2. 在layout.tsx中挂载Context Provider：

import { TitleProvider } from './TitleContext';
import Header from './Header';
import getDictionary from '[你的getDictionary路径]';
import type { Locale } from '[你的Locale类型路径]';

export default async function RootLayout({
  children,
  params: { lang },
}: {
  children: React.ReactNode;
  params: { lang: Locale };
}) {
  const dictionary = await getDictionary(lang);
  const pageTitle = dictionary.pages.home.title;

  return (
    <html lang={lang}>
      <body>
        <TitleProvider title={pageTitle}>
          <Header />
          {children}
        </TitleProvider>
      </body>
    </html>
  );
}

3. 在Header.tsx中调用Context：

'use client';
import { useTitle } from './TitleContext';

export default function Header() {
  const title = useTitle();
  return <p>{title}</p>;
}

注意：App Router中无法直接在客户端组件访问generateMetadata返回的对象，因为Metadata主要用于生成HTML的head标签（如<title>），并非直接暴露给React组件。上述方案均通过复用标题获取逻辑，或在Server Component中拿到标题后传递给客户端组件实现需求。

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